自己做付费网站,建筑招聘求职网,wordpress通知发帖,上海官网建设费用先来看一下网站截图#xff1a; 快速上手
1.创建并进入一个新目录
mkdir vuepress-starter cd vuepress-starter2.使用你喜欢的包管理器进行初始化
yarn init # npm init3.将 VuePress 安装为本地依赖
yarn add -D vuepress # npm install -D vuepress4.创建你…先来看一下网站截图 快速上手
1.创建并进入一个新目录
mkdir vuepress-starter cd vuepress-starter2.使用你喜欢的包管理器进行初始化
yarn init # npm init3.将 VuePress 安装为本地依赖
yarn add -D vuepress # npm install -D vuepress4.创建你的第一篇文档
mkdir docs echo # Hello VuePress docs/README.md5.在 package.json 中添加一些 scripts
{scripts: {docs:dev: vuepress dev docs,docs:build: vuepress build docs}
}6.在本地启动服务器
yarn docs:dev # npm run docs:devVuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。
目录结构
以下是我个人博客目前的目录结构主题为默认主题类似 Vue 以及 VuePress 官网。
.
├── docs
│ ├── .vuepress
| | ├── public (静态资源目录)
│ │ └── config.js (配置文件)
│ │
│ ├── README.md (首页)
| └── blog
| ├── css (介绍css相关)
| ├── micro (介绍微前端相关)
| ├── server (介绍服务器相关)
| └── vxmp (介绍微信小程序相关)
│
└── package.jsonconfig.js (配置文件)
下面我们来详细看一下 config.js 配置文件。
module.exports {title: Luminosity Blog,description: An awesome documentation website built with VuePress.,base: process.env.BASE_URL || /vuepress/,plugins: [[vuepress/back-to-top],[vuepress/medium-zoom],[vuepress/last-updated,{transformer: (timestamp, lang) {const moment require(moment);moment.locale(lang);return moment(timestamp).fromNow();},},],],head: [[link, { rel: icon, href: /favicon.ico }]],themeConfig: {logo: /ming.png,smoothScroll: true,lastUpdated: 上次更新,nav: [{ text: Home, link: / },{text: Blog,items: [{ text: CSS, link: /blog/css/ },{ text: VUE, link: /blog/vue/ },{ text: 微前端, link: /blog/micro/ },{ text: 服务器, link: /blog/server/ },{ text: 小程序, link: /blog/vxmp/ },],},{ text: GitHub, link: https://github.com/fadeache },],sidebar: {/blog/css/: [{title: CSS,collapsable: false,sidebarDepth: 2,children: [,animation...],},],...},},
}; base 部署时的基本地址。比如我们部署到一个服务器上这个服务器的域名是 zhang.beer并通过 nginx 转发到指定路径 vuepress这时就需要同时将此处的 base 也设置为 vuepress就可以通过访问 zhang.beer/vuepress 来访问博客了。 process.env.BASE_URL 用于动态修改基本地址的环境变量。例如当部署时传入环境变量 BASE_URL /another 时便可以通过访问 zhang.beer/another 来访问博客。 plugins 插件。有些插件属于官方自带有些插件需要自行下载详情见官网。这里选用了三个插件。 vuepress/back-to-top 该插件会给你的站点添加一个 返回顶部 按钮。当页面向下滚动时该按钮会显示在页面的右下角点击它就会滚动到页面顶部。该插件已经集成到默认主题中。vuepress/medium-zoom 为图片提供可缩放的功能。该插件已经集成到默认主题中。vuepress/last-updated 上次更新时间。默认情况下该插件为每个页面生成一个 13 位的时间戳你可以传入一个 transformer 将其转换为你想要的任何格式。该插件已经集成到默认主题中。同时使用 themeConfig.lastUpdated 选项可以设置提示文本例如我个人博客设置的为“上次更新”会根据远程存储库的更新时间显示在每篇博客的最下面。 smoothScroll 平滑滚动。设置为 true 时当点击侧边栏二级标题将会平滑滚动到该标题下否则直接跳转。 nav 顶部导航栏设置。这里我们设置了三个标题分别为 Home、Blog、GitHub。其中点击 Home 和 GitHub 是直接跳转的而点击 Blog 将会出现 5 个下拉选项CSS、VUE、微前端、服务器、小程序。 sidebar 侧边栏设置。根据导航栏设置的地址配置侧边栏。 title 侧边栏顶部大标题。collapsable 顶部大标题是否显示折叠箭头。sidebarDepth 侧边栏深度。设置 2 即表示显示博客的二级标题至侧边栏。children 该大标题下的博客。其中“”代表 README 文件。其余跟博客文件的名称对应。
Vercel 部署
Vercel 提供了一个强大的、可扩展的平台可以让开发者在不同的平台和环境中部署和管理他们的代码简单易用且免费。
所以我们选择 Vercel 将我们的博客网站进行部署。
1.首先将项目同步 github 然后在 Vercel 上关联该 github 账号。
2.在 Vercel 上点击 Add New Project。
3.点击 import导入该博客项目。
4.按照如下添加部署配置完成后点击 Deploy。其中 Environment Variables 和上文中 process.env.BASE_URL 对应选填。 5.部署成功后点击 Add Domain可以看到仅有 Vercel 给你预分配的一个域名由于 DNS 污染Vercel 的站点国内可能无法访问不过我们可以绑定自定义域名。
去代理商官网购买自己的专属域名例如我是在腾讯云购买的 zhang.beer 域名但是只免费提供了一级域名的证书。所以之前我只能通过部署到 zhang.beer/vuepress 上才能蹭到证书。
不过现在可以解析出一个二级域名例如 blog.zhang.beer尽管没有证书但是可以通过 Vercel 实现 HTTPS。
回到正题我们将 blog.zhang.beer 填入点 ADD 即可这时提示我们添加 CNAME 的解析记录一般为“cname.vercel-dns.com.”。
然后去腾讯云的域名控制台将此条解析记录添加进去即可将该博客部署到此域名同时给与免费的证书且无需手动安装。
