自己动手搭建博客

发表于 | 分类于 | 阅读次数：

搭博客不难，小白也能做，但这里的小白也不是说一点门槛都没有，毕竟涉及到命令，而命令又都是英文。不用担心，即使你不懂代码不懂英文也没关系，我也不懂，但只要照着做就能搭好，所以我说的门槛是指，耐心。

下几个软件

工欲善其事必先利其器，先介绍几个软件，和我们使用它的目的。但是介绍之前，可以先看看 博客效果，随便挑，有喜欢的主题就记下名字。

GitHub

GitHub是用来存放博客的空间，以后我们的博客页面就放在这里，别人通过它来看我们的博客。

它不是个软件，而是个网站，不用下载只需注册。打开 官网，是的你没有看错，这个网站全部是英文，但不影响使用。注册教程参考 GitHub的注册与使用 的第一部分。

有了账号之后，新建仓库。GitHub是一个功能强大的社区，不仅博客，什么玩意都能往上面放，只不过博客有点特殊，要使用它的博客功能，就必须在新建仓库时取特定的名字，格式是xxx.github.io，比如你的账号是xiaomin，那仓库名字就写xiaomin.github.io，这个仓库名字同时也是你的博客网址，以后别人想看你的博客，打开浏览器，输入 xiaomin.github.io 就可以了。

Git

Git不就是GitHub的前三个字母么？没错，但它们不一样，而且它们是配套使用的。GitHub用来存放，Git用来管理。

举个例子，你在自己电脑上写了篇文章，然后想把它放到博客上去，你会怎么做？打开GitHub登录账号再点击上传么？朋友，不是这么玩的，一整套博客不是只有文章就够了，还需要各种功能，这些功能是靠其他的文件实现的，那所有文件我们都一个一个手动上传么，当然不可能。引申一下，这里的上传，或者说复制，专业术语就是部署。所以不用觉得搞电脑很难，只不过是一些名词听不懂而已，理解后才发现它也就那样。每个行业都是如此，都有专业术语，用来过滤外行人。

我们用Git的其中一个原因就是它的部署功能，写完博客，一行命令就把所有文件复制过去了。Git是一个软件，到 官网 下载，也是全英文，下载后安装，一直点下一步就行，不会的话参考 Windows下Git的下载与安装。

Node.js

这玩意是一个运行环境，不用太较真，只用知道要安装它就够了，打开 官网，有两个绿色的按钮，LTS（长期支持版）和Current（当前最新版），下载LTS版，安装时一直下一步。

检查是否安装成功

  1. Win + r快捷键调出运行
  2. 输入cmd点确定
  3. 在黑窗口中输入node -v
  4. 回车之后出现v10.15.0，表示安装成功

这里v后面的数字不一定是10.15.0，它是安装的版本，只要node -v命令有效就可以了，具体版本是多少不重要。

Hexo

这才是搭建博客的主角，我们在自己电脑上写完文章，使用Hexo将文章制作成精美的页面，再使用Git将页面部署到GitHub。Hexo不能单独安装和运行，它需要Node.js环境，所以在安装Hexo之前，确保Node.js已经安装成功。

有兴趣的话可以看看Hexo的 官网，找不到下载的地方对不对，都说过它不能单独安装和运行，它的安装方式比较特别

  1. 桌面上点击右键，选择Git Bash Here（使用上面的cmd也可以）
  2. 在黑窗口输入npm install hexo-cli -g（这里的安装命令npm就是由Node.js提供）
  3. 回车之后开始下载和安装
  4. 检查是否安装成功，输入hexo -v
  5. 回车之后出现一系列版本号，安装成功

工欲善其事必先利其器，至此，器已经有了，但器还不利，接下来对器作一些配置，让器利起来。

敲几行命令

命令，或者说指令，就是我们在黑窗口敲的那些英文。而黑窗口，叫做命令行，专门用来执行命令。用命令行操作电脑，更加方便，复制粘贴回车一气呵成，想点错都点不了。

新建博客项目

  1. 新建一个空文件夹，比如取名blog
  2. 进入blog文件夹，右键，选择Git Bash Here
  3. 执行命令hexo init
  4. 等待，blog文件夹里会生成许多文件

现在，我们有了最原始的博客项目blog，以后更换主题就在这里面做，文章也在这里面写。

看看原版效果

  1. 切换到刚才的命令行（如果关闭了，就进入blog文件夹，右键，选择Git Bash Here）
  2. 执行命令hexo server（也可以简写为hexo s）
  3. 等待，命令行出现INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
  4. 打开浏览器，输入 localhost:4000

这个hexo s，也是以后修改主题或写完文章，在部署之前，在自己的电脑预览一下效果的命令。如果想停止预览，就切换到刚才的命令行，按Ctrl + C。

配置一键部署

要实现一键部署，需要先告诉Hexo部署到哪去，这个地址在哪找呢？打开GitHub并登陆，再点击自己的项目xiaomin.github.io，右侧有一个绿色的按钮Clone or download，点开后出现一个地址https://github.com/xiaomin/xiaomin.github.io.git，把它复制下来。找不到这个地址可参考 此文章。

接下来，我们要把地址粘贴到博客项目里。在blog文件夹，有一个非常重要的配置文件_config.yml，用记事本打开它，找到最后的deploy，然后将它修改成

1
2
3
4
deploy:
  type: git
  repo: https://github.com/xiaomin/xiaomin.github.io.git
  branch: master

中间的repo改成刚才复制的地址。除此以外，Hexo需要一个工具才能将它和Git联系起来

  1. 切换到命令行
  2. 执行命令npm install hexo-deployer-git --save
  3. 安装完成

剩下最后一步，Git在使用前，要添加一个用户名和一个邮箱，打开命令行执行

1
2
$ git config --global user.name xxx
$ git config --global user.email xxx@xxx.com

假如你的用户名是xiaomin，邮箱是123456@qq.com，那么就写

1
2
$ git config --global user.name xiaomin
$ git config --global user.email 123456@qq.com

注意，这里的$符号不要复制到命令行里去了，它是一个提示符，而不是命令本身，它表示“请输入命令”。细心的话你会发现，在敲每个命令前，都有这么一个符号。

去吧皮卡丘

之前讲过，这个博客项目的原理是，我们在自己电脑上写完文章，使用Hexo将文章制作成精美的页面，再使用Git将页面部署到GitHub。现在我们制作页面，还是切换到命令行

1
$ hexo generate

后面那个单词有点长，可以简写成hexo g。执行命令后会生成很多文件，然后我们部署过去

1
$ hexo deploy

这个命令也有点长，可以简写成hexo d。执行命令后会提示输入用户名和密码，把之前注册的GitHub账号和密码输入进去。大功告成，打开浏览器，输入 xiaomin.github.io。

最后说两句

要打造一个优秀的博客，需要打磨的地方有很多，但都不难，网上大把的教程。这篇文章只是最基础的入门，博客从无到有，但从有到精就看个人发挥了。

更换主题

原版的博客已经搭建成功，是不是很丑？还记得本文开头的地方，看到的 博客效果 么？把喜欢的主题的名字复制下来，到GitHub上搜索，就能找到源代码，下载下来扔到博客项目里，再应用一下新主题，博客就变身了。这里有一份参考 如何更换hexo博客主题。

编写文章

以后文章写在哪里呢？博客文件夹下的source/_posts，不明白可以到 官网 上看视频。写完之后按照前面的方法部署，再用浏览器去看。每次部署要敲两行命令，可以精简到一行

1
$ hexo g -d

部署前建议先执行

1
$ hexo clean

它的作用是删除之前制作的页面，这样可以避免一些莫名其妙的错误。