基于hexo和coding免费搭建个人博客网站

左手的ㄟ右手 2022-05-19 11:15 329阅读 0赞

# 基于hexo和coding免费搭建个人博客网站 #

## 前言 ##

现如今有很多人每天在看博客，也有很多人在各大平台发表博客，今天我们通过hexo博客框架来自己动手搭建一个免费并且完全DIY的个人博客。Hexo的优势在于方便快捷并且提供的主题丰富，本文是笔者在搭建博客期间的一些经验分享。还是先来看一下搭建完成后的效果吧—[我的博客][Link 1]。

## Hexo介绍 ##

[Hexo][]是由台湾在校大学生tommy351(twitter名)设计的一款基于node的静态网站生成器，它使用MarkDown语法解析文章，能够几秒内生成静态网页。使用hexo搭建博客你会发现页面浏览十分流畅，这就是静态网页部署的优势所在。

## 正文 ##

### 搭建前提 ###

在开始搭建博客网站之前需要以下准备：

*  安装 [Node.js][]
 *  安装 [Git][]
 *  注册 [coding][] 账号

### 下载并安装[Node][Node.js] ###

进入[Node下载][Node.js]页面，此处笔者下载当前稳定版本8.11.3,安装过程比较简单此处不再赘述。安装完成后在命令提示符下使用以下命令检测是否安装成功,如果显示安装的版本号即表示安装成功。

$ npm -v
    v8.11.3

### 下载并安装[Git][Git 1] ###

进入[Git下载][Git 1]页面，选择对应的系统版本和git版本号进行下载，安装过程此处不再赘述。安装完成后在桌面右键可以看到git bash或者开始菜单中也可以找到。本文后续大部分操作也都在git bash中完成。  
安装完成Git后，需要对Git进行用户名和密码的配置。

$ git config --global user.name "Your Name"
    $ git config --global user.email "email@example.com"

> 因为Git是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和Email地址。你也许会担心，如果有人故意冒充别人怎么办？这个不必担心，首先我们相信大家都是善良无知的群众，其次，真的有冒充的也是有办法可查的。----[廖雪峰Git教程][Git 2]

### Hexo安装 ###

首先我们先新建一个文件夹作为个人博客的文件目录，此处笔者创建blog文件夹。进入该文件夹后打开Git bash，开始安装hexo

$ npm install -g hexo-cli   #安装Hexo脚手架  
    $ hexo init  	             #Hexo自动在当前文件夹下下载搭建网站所需的所有文件
    $ npm install  	         #安装依赖包

此时在blog文件夹中我们可以看到已经生成了搭建网站所需要的所有文件了，其目录如下

│  .gitignore
    │  package.json
    │  _config.yml                     #博客网站的配置信息，核心配置文件
    │  
    ├─node_modules                                  
    │    
    ├─scaffolds                        #模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
    │      draft.md
    │      page.md
    │      post.md
    │      
    ├─source                           #资源文件夹是存放用户资源的地方，我们新建的md格式的博客就在此处
    │  └─_posts
    │          hello-world.md          #hexo为我们创建的hello-world样例文件
    │          
    └─themes                           #主题文件夹。Hexo会根据主题来生成静态页面。
        └─landscape                    #默认使用的主题

现在一个简单的个人博客已经创建完成，我们可以使用`hexo generate`命令来生成静态网页。然后通过`hexo server`命令启动本地服务器来预览一下hexo为我们提供的最原始博客页面。当然这两个命令也可以简写如下。

hexo g    
    hexo s

浏览器访问http://localhost:4000/，此时就可以看见一个简单的博客页面。该页面正是source目录下hello-world.md文件生成的静态网页。  
![hello-world][]

### 部署博客到coding ###

Coding与Github相似，都是基于Git的代码托管平台，GitHub大家应该都很熟悉，相对与Coding来说，GitHub面向英语系国家程序员，Coding面向中国程序猿，而且Coding的私有库可免费使用这是最大的区别。两者的用法和操作其实大同小异。笔者也是第一次使用Coding，所以大家共同学习。本文就使用了Coding来作为博客项目的托管平台。

#### 新建仓库 ####

1.打开coding主页，创建新项目  
![这里写图片描述][70]  
新建一个名为yourname.coding.me的项目，其中这里的yourname最好是coding注册时的username，等项目部署成功后它就是你博客的访问地址。如下所示coding可以创建私有仓库，GitHub中是要收费的。  
![这里写图片描述][70 1]  
2.开启Pages服务，开启后我们就可以通过 `用户名`\+网站后缀来访问博客，而且还可以绑定域名通过固定域名来访问。进入项目->代码->Pages服务，具体操作如下：  
![这里写图片描述][70 2]

### 连接到Coding ###

在管理Git项目时，无论是GitHub还是Coding我们可以通过`SSH、HTTPS`两种方式来`clone`或者`push`代码，当使用`HTTPS`的方式来管理代码，每次操作时都需要验证用户名和密码；而使用SSH方式`Push`代码之前需要配置个人的SSH key,这样就可以省掉繁琐的验证步骤。  
当然，我们也可以选择通过HTTPS方式来进行项目的管理，那么请**跳过SSH key的配置步骤**，直接阅读项目部署步骤的内容。

#### 配置SSH key ####

以下命令皆在Git bash下执行  
**1.检查你的电脑上是否已经生成了SSH Key**

$ cd ~/.ssh
    $ ls

如果该目录下存在`id_rsa.pub`或`id_dsa.pub`文件,那么直接进行**第三步**

**2.创建一个SSH Key**  
执行创建命令

ssh-keygen -t rsa -C "username"

代码参数含义：

<table> 
 <thead> 
  <tr> 
   <th align="center">参数</th> 
   <th align="left">描述</th> 
   <th align="center">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><code>-t</code></td> 
   <td align="left">指定密钥类型，默认是rsa，可以省略。</td> 
   <td align="center"><code>rsa</code></td> 
  </tr> 
  <tr> 
   <td align="center"><code>-C</code></td> 
   <td align="left">设置注释文字，比如用户名。</td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center"><code>-f</code></td> 
   <td align="left">-f指定密钥文件存储文件名。</td> 
   <td align="center"></td> 
  </tr> 
 </tbody> 
</table>

以上命令省略了`-f`参数，因此，运行上面那条命令后会让你输入一个文件名，用于保存刚才生成的SSH key代码，如：

Generating public/private rsa key pair. 
    Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]

此处我们直接按下回车使用默认文件名创建，那么就会生成id\_rsa和id\_rsa.pub两个秘钥文件。  
接着又会提示你输入两次密码（该密码是你push文件的时候要输入的密码，而不是Coding管理者的密码），当然，你也可以不输入密码，直接按回车。那么push的时候就不需要输入密码，直接提交到Git服务器上了，如：

Enter passphrase (empty for no passphrase): 
    Enter same passphrase again:

接下来，就会显示如下一些提示，如：

Your identification has been saved in /c/Users/you/.ssh/id_rsa. 
    Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.

**3.在Coding中配置SSH Key**  
在刚才生成的文件夹中找到`id_rsa.pub`,用记事本打开后全选复制。  
打开浏览器，进入我们Coding的工作台，账户->SSH公钥，按如下操作，将生成的SSH key添加。  
![图][70 3]

### 部署发布项目 ###

在我们创建的博客项目工作空间中找到\_config.yml文件，打开后在文件的最后方，可以看到如下配置：

deploy：   
        type:

对该配置进行修改如下(**注意缩进**)：

deploy：   
        type: git
        repository: git@git.coding.net:yourname/yourname.coding.me.git       #发布到Coding（SSH方式）
        branch: master

该配置指定了Coding仓库的地址，并通过SSH方式进行连接。同样我们也可以通过HTTPS方式。repository写法如下：

> repository: https://git.coding.net/yourname/yourname.coding.me.git

保存后关闭，在项目当前目录打开Git Bash ，因为项目的部署会用到`hexo-deployer-git`，所以先安装该插件：

$ npm install hexo-deployer-git --save

安装完成后，开始项目的部署操作，每次的部署操作可以分三步来，分别如下：

$ hexo clean                #清除缓存文件和已生成的静态文件。更换主题后一定要用
    $ hexo g                    #完整命令为hexo generate ，生成静态文件。
    $ hexo d                    #完整命令为hexo deploy ，部署网站。

如果你使用的是SSH方式的话，应该可以看到commit和push成功的记录，说明已经部署成功。如果使用的是HTTPS方式，会弹出输入用户名密码的输入框，键入你的coding用户名密码即可。

> 此时打开浏览器访问 https://yourname.coding.me

### 主题更换 ###

我们刚才搭建的博客使用的是默认的`landscape`主题。我们也可以在hexo提供的[主题页面][Link 2]中选择自己喜欢的进行配置。在博客文件夹下的themes文件夹，该目录下存放的就是所有的主题资源。此处笔者以Next主题的配置为例。

1.  首先第一步下载主题,下载命令格式为`git clone {主题链接} themes/{主题名称}`。

$	git clone https://github.com/iissnan/hexo-theme-next themes/next

下载完成后，在themes文件夹下就可以看到Next主题的相关文件。  
2. 下载完成，接着就是启用主题。  
在博客文件根目录中找到`_config.yml`文件，并用记事本打开，对`theme`属性进行修改

theme: next      #原本为lanscape主题，此处直接修改为我们下载的主题名

1.  完成以上配置后，我们既定要记得清楚缓存并重新部署项目，操作如下：

$   hexo clean          #清除缓存
    $   hexo g              #生成静态文件
    $   hexo d              #部署博客网站

此时，我们的博客主题已经修改成功。

## 总结 ##

搭建个人博客网站，并且坚持在网站上更发表自己的一些知识积累是很有意义的，这个过程不但让你融会贯通而且完全转化为自己的理解。笔者在搭建过程中也遇到许多坑，多亏有网上的众多大牛前辈。先回过头来看其实还是很有成就感的，当然当前进度的博客网站只能算是刚刚搭建好，hexo本来就是完全DIY的，主题和页面都需要更多的优化，最重要的是内容不能停，既然搭建好了，就坚持写下去吧。

> 大家如果有问题或者笔者博客内容有误可以留言交流，共同学习。

## 参考的文章 ##

> hexo开发手册可以初步了解 hexo： https://hexo.io/zh-cn/docs/  
> 博客搭建的基础教程写得非常详细： https://www.jianshu.com/p/eb002d35436c

[Link 1]: http://larscheng.com
[Hexo]: https://hexo.io/zh-cn/
[Node.js]: https://nodejs.org/zh-cn/
[Git]: https://git-scm.com/
[coding]: https://coding.net/
[Git 1]: https://git-scm.com/download/win
[Git 2]: https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
[hello-world]: /images/20220519/a0666188727c4b7d95576df1f4aef5dd.png
[70]: /images/20220519/cd7027c649bd4b6288d786d7cfbb510f.png
[70 1]: /images/20220519/6b56966760084ce882ccd3f5f8891eb5.png
[70 2]: /images/20220519/6cf36d1b56a34b9d9b90372a10a598cc.png
[70 3]: /images/20220519/2d148cd89a4b407286a8d1a91bd95e1e.png
[Link 2]: https://hexo.io/themes/