Blog の 搭建过程

---

第零步 简单说明

博客由Vuepress + Github Pages 搭建完成。

​ Vuepress 是一个基于vue框架的简便静态网站搭建工具 。

它不需要你投入过多的学习成本，基本上你只要看了它官网的快速上手说明，就能很好的搭建起一个文档类静态页面，所以我也认为它是非常适合搭建简易个人博客的，尤其适合那些只想利用个人博客来记录自己学习过程或者把它当成一个回顾笔记的人。

​ 接下来我会介绍我是如何使用它来构建这整个简易博客的。

第一步 确定开发环境

​ 需要的开发环境：Node.js （安装好yarn）+适合自己的ide工具

​ Node.js的版本就推荐是最新版，因为旧版本的Node.js可能对Vuepress的支持不是很好。

VuePress 需要 Node.js (opens new window)>= 8.6，注意配置好自己的环境变量啥的，这里不赘述了。

​ ide工具，我使用的是Webstorm，它最近也刚好免费开放了，而且用起来也很省心，接下来我也会按照它来说明操作。

第二步 创建github仓库

​ 因为我们要用到 github pages，所以先创建好对应的Repository。

​ 关于通行证啥的，自己选就好了。

​ 创建好了。

​ 注意接下来我们创建项目时会用到这个仓库的链接，所以你可以先把它记下来。

第三步 开始安装Vuepress

我使用的Vuepress版本是v1.0 ，因为目前最新版的v2.0还处于beta阶段，实际使用起来还是会有很多问题，所以我比较推荐你还是跟着Vuepress v1.0的版本来。

Vuepress v1.0 官网链接: https://v1.vuepress.vuejs.org/zh/

首先，我们要创建一个目录来存放我们的Blog项目。

我这里是方便我自己使用而创建的 front 文件夹，因为考虑到未来博客的拓展性，它可能会接上其他的项目，所以我是按照一定设计来创建的项目文件夹的。

我个人这样创建是因为可以合理利用域名，比如这个博客就可以作为二级域名来使用：blog.simms.work，未来有其他的个人网站上线也可以绑定到上面，结构非常清晰。

而front意思是前端(front end)，为以后区分前后端做准备。

创建完文件夹之后就可以开始安装了。

1. 首先进入该文件夹，即front文件夹

2. 在文件夹上方的目录栏中输入cmd，打开命令提示符

3. 在cmd中输入：

   yarn add -D vuepress
   

   

这里说明一下为什么要用yarn init，而不是npm init

官网说了，虽然可以yarn和npm两种方式都可以用来进行项目构建，但目前而言，如果你的项目构建时会使用到webpack 3.x，那就尽量别用npm。（webpack3.x在2017年就推出了，所以很大概率会用到），如果你用了，后面就会发现会报错

4. 输入完之后，控制台会显示这些：

​ 其中的 repository url那列值得注意，它对应着你之前创建的github仓库的链接，直接复制过来就好了。

name ：就是项目的名字，正如我前面提到的，并不会创建新文件夹，所以可以取你自己想要的名字

version：版本信息

description：项目描述

entry point：项目入口

repository url：对应的仓库链接

author：作者

license：通行证

private：私密性，决定是否能够上传到npm仓库

5. 输入完成后按下回车

6. 接下来输入以下指令来构建vuepress

yarn add -D vuepress

7. 最后显示Done就安装完成了

   

第四步 创建你的文档与目录

vuepress有个特点就是它是以文档为中心的，你甚至都不要怎么写代码。

创建第一个文档与目录

实际上到这里，你就可以直接用你的ide工具进行操作了

在文件夹下创建一个叫docs的文件夹，如图：

在docs文件夹中创建一个README.md文件（你可以直接用新建文本txt改后缀md），如图：

实际上vuepress官网指南提供了自动的cmd命令，可以直接使用它，但要注意可能会出现md文件显示乱码的问题

mkdir docs && echo '# Hello VuePress' > docs/README.md

配置package.json文件，如图：

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

服务器，启动！

在命令行输入命令启动：

yarn docs:dev

VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。

第五步 GithubPages 配置

Vuepress 官方文档 https://v1.vuepress.vuejs.org/

关于Vuepress的配置使用，建议直接去看官网文档，写的非常简明易懂

注意：在对GithubPages配置之前，你得安装配置好 Git

配置好上传功能

GithubPages是一个静态页面搭建工具，免费，非常适合部署个人的小型静态网站，特别是文档类博客这样的网站。

在项目根目录创建这样一个文件：

在文件中写入（注意修改你自己的url）：

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

echo 'blog.simms.work' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:username/repository.git master:gh-pages

cd -

然后在deploy.sh同目录下，再创建一个.bat 批处理文件，用来运行这个文件：

注意把前面的文件路径改成你自己的git路径

"C:\Program Files\Git\bin\bash.exe" deploy.sh
pause

写完这个你就可以把你的页面发布到Github对应的Repository的gh-pages分支下了。

回到Github仓库页面

在配置这个之前，记得先配置好你的Github秘钥。

同时，你还需要去你注册域名的域名商处，进行DNS解析，选择CNAME解析。

在Github对应仓库的分支页面，选择Settings下的Pages开始对其进行配置。

在Pages页面配置好你需要发布的分支、绑定的域名地址，以及是否开启https，然后就OK了。

结束

The End.