使用Hexo+GitHub搭建个人博客

ゝ一世哀愁。 2022-06-09 04:21 210阅读 0赞

> 使用Hexo+GitHub搭建一个属于自己的博客.

## 准备 ##

### 注册GitHub账号,并建立新仓库 ###

你需要在 Github 上创建一个属于自己的账户，然后新建一个仓库（`new repository`），并命名为 `YourSiteName.github.io`，此时 Github 会帮助你初始化一个静态网页，你可以根据自己的喜好选择一些模版（这都不是重点），接着尝试访问下你所建的站点，成功后就可以开始动工了。

### 安装Hexo并且初始化博客框架 ###

#### 安装Nodejs和Git ####

因为，Hexo的安装和搭建依赖于Nodejs和Git。所以先到官网下载[Nodejs官网][Nodejs]和[Git官网][Git]进行安装。顺便提供[Nodejs百度云][Nodejs 1]和[Git百度云][Git 1]的下载连接。

#### 安装Hexo ####

在上面安装好了NodeJs和Git后，就可以进行Hexo的安装了。Hexo的安装如下

npm install -g hexo-cli

#### 使用Hexo初始化博客框架 ####

$ hexo init <yourFolder>
    $ cd <yourFolder>
    $ npm install

初始化Hexo的博客框架，完成后大概的目录，

├── _config.yml //站点的配置信息，您可以在此配置大部分的参数。
    ├── package.json
    ├── scaffolds     //模版文件夹。当您新建文章时，Hexo会根据 scaffold 来建立文件。
    ├── source     //资源文件夹是存放用户资源的地方。
    | ├── _drafts
    | └── _posts
    └── themes     //主题文件夹。Hexo会根据主题来生成静态页面。

#### 新建文章（创建一个Hello World） ####

hexo new "Hello World"

在`/source/_post`里添加`hello-world.md`文件，之后新建的文章都将存放在此目录下。

#### 生成网站 ####

hexo generate

此时会将`/source`的`.md`文件生成到`/public`中，形成网站的静态文件。

#### 生成标签和分类页面 ####

在解决`生成标签和分类页面`中的[参考网址][Link 1]在此记录下来。  
\* 新建一个页面，命名为 tags 。命令如下：

hexo new page "tags"

*  编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：

title: Tagcloud
    date: 2014-12-22 12:39:04
    type: "tags"

\* 在菜单中添加链接。编辑主题配置文件\_config.yml，添加 tags 到 menu 中。如下:

menu:
      home: /
      archives: /archives
      tags: /tags

#### 开启本地服务器 ####

hexo server -p 4000

在浏览器输入`http://localhost:4000`,查看网站显示。

#### 部署本地站点到GitHub上 ####

##### 在站点配置文件\_config.yml中配置你所要部署的站点信息 #####

将下面的youName换成在GitHub上的用户名就好了。

# Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
        type: git
        repository: git@github.com:youName/youName.github.io
        branch: master

##### 配置本地到GitHub的SSH免密钥登录 #####

在实现免密钥登录的时候，[参考的博客地址][Link 2]。  
\* 首先检查电脑上现有的ssh key,打开git bsah，输入命令`ls -al ~/.ssh`如果不存在就没有关系，如果存在的话，直接删除.ssh文件夹里面所有文件.

*  输入`ssh -keygen -t rsa -C "youziji@qq.com"`,**然后会提示你填写passphrase，一路回车即可**。  
    Enter file in which to save the key (/Users/your\_user\_directory/.ssh/id\_rsa):（回车就好），  
    Enter passphrase (empty for no passphrase):（回车，不需要输入密码）  
    Enter same passphrase again:（回车不需要输入密码）  
    **注意： 因为Hexo的自动部署如果有密码的话会部署失败**
 *  输入`ssh -agent -s`命令。
 *  继续输入`ssh -add ~/.ssh/id_rsa`，输入之后，在我这里是出错了，不知道你的有没有出错。如何也出错了，就输入：``eval `ssh-agent -s` ssh-add``即可。
 *  添加SSH key到Github账户。键入以下指令，拷贝Key（先拷贝了，等一下可以直接粘贴）：`clip < ~/.ssh/id_rsa.pub`.在GitHub添加key的过程如下，  
    ![第一步][A1r8JG7.png]  
    ![第二步][vKR9Lpz.png]  
    ![第三步][xBBiDvS.png]  
    ![第四步][mBuYco1.png]

##### 验证免密钥是不是成功 #####

输入`ssh -T git@github.com`，如果出现如下图所示，那么恭喜你，ssh key已经配置好了.  
![tkYsrYL.png][]

##### 安装部署到Github的插件 #####

npm install hexo-deployer-git --save

##### 进行部署 #####

hexo deploy

## 使用Next主题让站点更酷炫 ##

### 下载Next主题 ###

cd your-hexo-site
    git clone https://github.com/iissnan/hexo-theme-next themes/next

从Next的Gihub仓库中获取最新版本。

### 启用Next主题 ###

需要修改站点的配置文件\_config.yml配置项theme，

# Extensions
    ## Plugins: http://hexo.io/plugins/
    ## Themes: http://hexo.io/themes/
    theme: next

### 验证是否启用 ###

hexo s --debug

访问 `http://localhost:4000`,确保站点正常运行。

## Next的官网 ##

[Next的中文官方网站][Next].可以在上面查找想获取的信息。

[Nodejs]: https://nodejs.org/en/
[Git]: https://git-scm.com/download/
[Nodejs 1]: http://pan.baidu.com/s/1o6opb9g
[Git 1]: http://pan.baidu.com/s/1c0rroje
[Link 1]: https://www.zhihu.com/question/29017171
[Link 2]: http://blog.csdn.net/u3d_ysj/article/details/50525820
[A1r8JG7.png]: http://i.imgur.com/A1r8JG7.png
[vKR9Lpz.png]: http://i.imgur.com/vKR9Lpz.png
[xBBiDvS.png]: http://i.imgur.com/xBBiDvS.png
[mBuYco1.png]: http://i.imgur.com/mBuYco1.png
[tkYsrYL.png]: http://i.imgur.com/tkYsrYL.png
[Next]: https://hexo.io/zh-cn/docs/