只需要几步就能完完全全搭建属于自己的博客

只需要几步就能完完全全搭建属于自己的博客

前言

早在今年年初就有搭建自己的博客的打算，在了解之前其实在网上有很多关于搭建博客相关的文章。自己也是跟着别人的教程搭建了一个本地的博客，但是搭建好过后也就没有下一步的打算了。好在上几周自己醒悟了，在阿里云买了一个域名，顺便又从新搭建了一个基于hexo的博客，并绑定到了自己买的域名上去了。所以此处并记录一下自己在搭建博客的步骤以及图和绑定域名（注意此处是基于hexo + coding来搭建博客的。github和coding的博客搭建其实都是差不多的，知识coding在国内的访问速度比较快而已）。

第一步：创建项目并配置SSH和项目的pages服务

在coding上创建一个项目（注意：没有coding账号的需要自己注册账号），给自己创建的项目命名，此处我命名为blogtest。

仓库创建好了过后我们再配置SSH，SSH是管理代码仓库的公钥。其他的就不做介绍了，因为自己也没有深入的了解过，如想了解的可在网上搜索廖雪峰的git教程即可。先在本地安装git。如果git安装好了就在本地生成ssh公钥，如果本地有的就不需要了，只需要将本地的公钥配置到你的个人信息（这里配置了个人的公钥，没有配置项目单独的公钥）里面就可以。

1. 打开git bash，使用如下命令创建ssh公钥（如果本地有生成的公钥则跳过这一步）：

   ssh-keygen

   敲击三个回车键，表示按照默认的配置即可。

2. 使用如下命令查看生成的ssh公钥并复制公钥内容，如图所示：

3.将打印出来的公钥复制到你的仓库里面并点击添加即可。如图所示：

ssh配置好了过后，我们再配置项目的pages服务。打开项目，在代码模块里面有一栏Pages服务，选择静态Pages（此处创建的为静态博客），选择分支（在创建项目的时候我们默认勾选了创建一个README.md，所以在创建仓库的时候就已经给你创建好了一个默认的master分支）来源并保存。

第二步：Hexo的环境搭建并创建一个本地的博客

此处我们根据Hexo的官方文档（https://hexo.io/zh-cn/docs/ ）来搭建Hexo的环境，并创建一个本地的博客。

1. 安装Node.js和Git(此处我们已经安装)。Node.js我们还是采用到官网去下载安装，安装好了过后打开windows命令行输入相关命令查看node.js的版本和npm相关的版本。注意npm是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题。

2. npm设置淘宝镜像，这点很关键。如果不设置这点的话直接用npm命令可能导致等待很长一段时间安装某些东西或者直接安装失败。此处是使用cnpm代替npm命令。直接输入以下命令即可代替。

   npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 代理设置好了过后我们就看是使用cnpm命令安装hexo

   cnpm install -g hexo-cli

4. 安装完了过后，我们首先打开命令行并进入到某文件夹路径下，使用如下命令来创建属于自己的本地博客。
   

5.这样初始化过后，我们使用hexo g d命令生成资源文件，再使用hexo server -p 5000 命令开启服务，使用hexo server是默认是使用本地的4000端口开启服务，我们这里使用了指定端口开启服务，那我们在本地浏览器访问试试呢。本地命令如下：

6.览器访问结果：

此处我们需要安装一个插件，就是hexo在发布的时候自动提交到仓库的插件。在此之前，我们首先得了解hexo得命令得含义。

1. hexo g 命令是生成静态资源文件的，命令的全称是hexo generate，简写为hexo g。

2. hexo d 命令是部署生成的静态资源文件，命令的全称是hexo deploy，简写为hexo d。

3. hexo clean 清除本地生成的静态资源文件。

4. hexo server 启动服务器。默认情况下，访问网址为： http://localhost:4000/ 。可以指定端口启动 命令为 hexo server -p [port]

5. hexo new “文章名称” 新建文章。默认新建的文章是放在blog/source/_posts/ 目录下的。

上述只是简单的介绍了四个命令，还有其他更多的命令可以去官方文档了解。下面我们还是先使用cnpm下载所需要的插件吧。

插件下载好了过后，我们就需要在博客的配置文件中去配置相应的仓库地址和相应的分支了。blog/_config.yml文件就是整个博客的配置文件，博客所需的每个主题也有自己的配置文件（路径为blog/themes/相应的主题文件夹/_config.yml），二者不要搞混了。我们使用notepad++，sublime或者其他编辑软件打开。注意里面的参数配置，在官方文档中都有介绍，此处我们不做详细了解，我们只需要观察deploy这一部分部署的配置。配置如下：

配置信息：

执行命令：

查看仓库的提交信息。

说明提交成功了，注意此处不是提交你整个博客文件夹，而是提交你生成的静态资源文件到你的仓库中。这里我们再来看看仓库的Pagers服务，这里肯定是有什么变化才对。见下图：

如上图，coding给我们自动生成了一个访问地址，我们点击试试，会不会和我们在本地访问的一样呢。。。。

这是什么鬼，怎么成这逼样了。。。不是说好的界面一样呢。简直不敢相信啊。其实这是你还有地方没配置好，我们需要在博客的配置文件里面配置如下：

将博客的url地址和根目录配置好了过后再次依次执行hexo clean，hexo g,hexo d三个命令后重新开启项目的Pages服务，等待一会儿点击链接。如图所示：

效果出来了，是不是一模一样的。就是这么溜的骚操作。

第四步：配置WebHook，让你在自动提交代码后，自动部署你仓库里面的博客资源

WebHook是一个自动部署的工具，它允许第三方的应用监听你仓库内容的变化，如每一次的提交，拉取信息，删除信息等等。一般常见的是结合Jenkins使用实现提交代码后自动打包。这种效果减少了人工手动打包带来的不必要的时间浪费。在项目开发和测试阶段非常适用，测试和开发的任务就相对的分开，不必要每次的修改都要手动打包。此处我们搭建博客也是如此，我们每次修改了东西后必须重新在Pages服务里面重新部署一次，这样的操作就比较繁琐了。在使用WebHook的同时，我们提交了我们的文件到仓库里面，WebHook监听到我们的提交信息就会自动部署目标URL一次。这样来实现自动部署效果。这里我们需要在项目的设置页面去添加我们的WebHook。

点击添加按钮，配置如下：

点击确定后，我们就会看到我们配置的WebHook信息。我们可以进行测试，或者修改本地博客后进行提交来进行测试。

第五步：绑定我们申请的域名

上述的域名是coding自动生成的，不能修改并且还有其他的限制，这里我们需要在万网去申请自己的域名，申请过后进行审核备案。这里需要几天的时间。成功过后，我们就来绑定我们的域名。这里我已经申请了自己的域名来进行测试。

上面是阿里云的域名管理平台，我们现在先把申请的域名的 CNAME 记录到 pages.coding.me 后再到coding的Pages服务中去绑定。

将CNAME记录到 pages.coding.me 。如图所示：

点击确定后，我们再到我们的项目中的Pages服务中去绑定我们的域名绑定我们的域名。

点击绑定，我们的博客链接是不是变成我们自己的域名了。点击看看效果呢。。。。。。

咋又是这个逼样啊，不是万事俱备嘛！看来还需要东风才行啊。想一想是不是我们又得重新修改我们的配置才行啊，试一试呢。。。。

重新修改配置如下图

2. 重新配置完了，我们执行hexo g,hexo d两个命令试试，这里我们设置了WebHook，不需要自己重新部署了，等个一分钟左右刷新试试。

3. 看到图中显示的真的不错，踏遍千山万水总算是搞好了。也不浪费我的苦心啊。

总结

此处我们算是从头到尾讲了一遍了，想想也是不错，坑也踩了，效果也出来了，还算对得起自己的良苦用心（注意：相关的文档还是得去去官网了解）。自己在年初的时候搞这个也花了一周多的时间，最初使用的Jekyll来搭建，现在是用的hexo来搭建，其实都是差不多的，只要搞懂原理都很简单的。hexo和Jekyll都有多种多样的主题，看自己的风格（其实我就是用的自带的，没用其他的。感觉还是自带的好看一点→_→ ╭(╯ε╰)╮）搞个自己的博客对于平时做做笔记也是很不错的。此处就是采用的hexo默认使用的主题，并且提供的主题都有相应的配置教程，只需按照教程将博客和相关的主题配置好就OK。这里也不用多说了，多多下去练练吧。好记性不如烂笔头，热炒热卖一个试试呢。。。。。。。。