Hexo+github搭建个人博客环境配置和发布（图文详解）

2018-08-01 16:51:08 浏览数 (1)

上一篇博文 《Hexo github搭建个人博客－环境搭建篇》 中，我们讲解了利用Hexo搭建个人博客应该要配置哪些环境。 相信大家已经迫不及待的想要知道接下来应该要怎么把自己的博客搭起来了，下面，让我们一起见证这奇迹的时刻。

. 一、初始化博客

首先，我们需要按照下面的步骤进行博客的初始化：

1） 创建一个myblog文件夹，当然你也可以命名为其他名字,这里以myblog为例

代码语言：javascript复制
$ mkdir myblog

2） 执行以下命令，Hexo将会在目标文件夹下建立博客需要的所有文件

代码语言：javascript复制
$ hexo init

这个时候终端会输出

代码语言：javascript复制
INFO  Copying data to ~/Documents/workspace/git/myblog
INFO  You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!

同时，hexo-blog目录下会生成以下文件:

  • scaffolds : 脚手架，用于存放我们创建文章时的模版
  • source : 用于存放我们用markdown编写的博文原文件、其他静态资源文件
  • themes : 用于存放主题，里面有我们博客的默认主题landscape
  • _config.yml : Hexo和站点的配置文件，里面可以设置博客的名字、标题、作者、链接格式等相关项

3） 执行以下命令进行依赖包安装

代码语言：javascript复制
$ sudo npm install

执行成功后，hexo-blog目录下将会增加一个模块

代码语言：javascript复制
node_modules: 关联保存了将会使用到的hexo依赖包

. 二、配置博客

当我们的博客初始化完成以后，接下来要做的就是对其进行个性化的配置了. 为了让大家更好懂，下面我就以配置博客 我的博客 为例进行讲解。

2.1 Hexo设置

这个其实就是博客根目录下的 _config.yml 文件，主要是对Hexo的配置以及站点的相关配置，下面开始进行分段详细的说明

1） 站点配置

代码语言：javascript复制
1 # Site
2 title: cy的美好生活    # 网站标题
3 subtitle: life is beautiful like sunshine!    # 网站子标题
4 description: 这是一个利用Hexo搭建的博客    # 网站描述
5 author:  sihai   # 网站作者，也就是您的名字
6 language: zh-CN   # 网站使用的语言,这需要注意：看你的主题文件下的language包下有什么语言包就些什么。后面详细说明！        
7 timezone:         # 网站时区。Hexo 预设使用您电脑的时区。

2） 网址配置

这个地方一般根据情况修改 url 和 root 即可。

代码语言：javascript复制
# URL
 url: http://OUYANGISHAI.github.io         # 博客网址
 root: /                                 # 网站根目录
 permalink: :year/:month/:day/:title/    # 文章的永久链接格式   :year/:month/:day/:title/
 permalink_defaults:                     # 永久链接中各部分的默认值

注意： 如果你的网站存放在子目录中，例如 http:// ouyangsihai.github.io/blog, 则将url设为http:// ouyangsihai.github.io/blog， 并且把 root 设为/blog/。

3） 目录配置 这个地方一般直接取默认值不用修改。

代码语言：javascript复制
# Directory
source_dir: source         # 资源文件夹，这个文件夹用来存放内容，例如我们用markdown编写的博文
public_dir: public         # 公共文件夹，这个文件夹用于存放生成的静态博客文件。
tag_dir: tags              # 标签文件夹
archive_dir: archives      # 归档文件夹
category_dir: categories   # 分类文件夹
code_dir: downloads/code   # Include code 文件夹
i18n_dir: :lang            # 国际化（i18n）文件夹
skip_render:               # 跳过指定文件的渲染，您可使用 glob 来配置路径。

4） 文章配置

这个地方一般直接取默认值不用修改。

代码语言：javascript复制
# Writing
new_post_name: :title.md    # 新文章的文件名称
default_layout: post        # 预设布局
titlecase: false            # 把标题转换为 titlecase（titlecase指的是将每个单词首字母转换成大写）
external_link: true         # 在新标签中打开链接
filename_case: 0            # 把文件名称转换为 (1) 小写或 (2) 大写, 0表示不变
render_drafts: false        # 显示草稿
post_asset_folder: false    # 启动 Asset 文件夹
relative_link: false        # 把链接改为与根目录的相对位址
future: true                # 显示未来的文章
highlight:                  # 代码块的设置
  enable: true              
  line_number: true         # 是否显示行号
  auto_detect: true         # 是否自动监测
  tab_replace:              # 将 tab 替换成其他字符串

5） 分类和标签配置

这个地方一般直接取默认值不用修改。

代码语言：javascript复制
 # Category & Tag
 default_category: uncategorized    # 默认分类, uncategorized表示未分类
 category_map:                      # 分类别名
 tag_map:                           # 标签别名

6） 日期 以及 时间格式 配置

Hexo 使用 Moment.js 来解析和现实时间，一般我们直接取默认值不用修改。 如果你想修改的话，可以按照 http://momentjs.com/docs/#/displaying/format/ 中定义的格式进行修改。

代码语言：javascript复制
 date_format: YYYY-MM-DD           # 日期格式
 time_format: HH:mm:ss             # 时间格式

7） 分页配置

这个地方一般根据自己的需求修改 per_page 设置每页显示的文章数量即可。

代码语言：javascript复制
 # Pagination
 per_page: 10                      # 每页显示的文章量，如果设置值为0，则表示禁止分野
 pagination_dir: page              # 分页目录

8） 主题配置

一般从这里开始，都是属于Hexo拓展插件的配置了，下面这段是配置我们博客所要使用的主题名字，想要获取更多的主题，可以参考：http://hexo.io/themes/

代码语言：javascript复制
 # Extensions
 theme: landscape    # 主题设置，默认是 landscape

9） 部署配置

这一块涉及到博客发布，将在下一篇博文中统一进行讲解，这里可以先不用修改配置

代码语言：javascript复制
 # Deployment
 deploy:
   type:     # 设置发布类型，如git，rsync

2.2 主题设置

这个其实就是 themes/{主题名称}/_config.yml 文件了，主要是网站主题的一些配置，如需要显示的菜单、开启的组件等等。

不同的主题，都会增加了自己的一些特别开关，下面只以默认主题为例进行讲解。

1） 菜单配置

这里主要是对博客显示的菜单项的访问路径进行配置，

代码语言：javascript复制
menu:
  home: / || home #首页
  categories: /categories/ || th #分类
  archives: /archives/ || archive #归档
  tags: /tags/ || tags #标签
  about: /about/ || user #关于
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

2） 显示内容配置

这里主要对博客显示的内容进行设置，比如查看全文的按钮文本显示。

代码语言：javascript复制
 # Content
 excerpt_link: 阅读全文    # 设置查看全文的按钮显示文本
 fancybox: true           # 是否开启弹出层效果

3） 侧边栏配置

主要是对侧边栏展现进行设置。

代码语言：javascript复制
# Sidebar
sidebar: right    # 侧边栏展示的方向
widgets:          # 侧边栏添加的组件配置
- category        # 显示分类
- tag             # 显示标签
- tagcloud        # 显示标签云
- archive         # 显示归档
- recent_posts    # 显示最近发布

4） 其他

第1点 和 第2点 都是大部分主题通用的配置，下面这些就是比较定制化的了。除了下面列出的，国内大部分主题都还会添加了百度统计的ID配置、多说的ID配置、Jiathis分享活着百度分享的配置等等。

具体我们依旧是只讲解默认主题里面的。

代码语言：javascript复制
# Miscellaneous
google_analytics: "UA-********-1"    # 谷歌统计的ID配置，如果你没有用到，可以为空
favicon: /favicon.png                # 网站图标路径
twitter:                             # twitter配置
google_plus:                         # google plus 配置
fb_admins:                           # facebook 配置
fb_app_id:

至此，我们博客的 Hexo配置 和 主题配置 都完成了。

. 三、创建博文 - Hello Hexo

当我们的博客个性化配置完成后，我们一起来看下如何创建我们的第一篇博文－Hello Hexo.

1） 进入到博客的根目录，执行以下命令生成新的博文

代码语言：javascript复制
$ hexo new hello-hexo    # 格式是： hexo new ｛文章名｝

命令执行成功后，你就会发现在 source/_posts 目录下多了一个文件 hello-hexo.md 。 前面我们已经说到，我们的博文使用markdown语法进行编写的，后面的博文我会详细的进行markdown语法的讲解。 接下来，打开这个文件，我们可以看到以下内容：

代码语言：javascript复制
---
 title: hello-hexo
 date: 2015-09-03 00:08:30
 tags:
 ---

他们的含义是：

  • title : 文章的标题
  • date : 该文章的创建时间
  • tags : 该文章的标记tag

下面我们可以更改成

代码语言：javascript复制
title: 你好，Hexo
date: 2015-09-03 00:08:30
tags: 
  - hexo
---
这是我的第一篇博客，你好，Hexo。

到这里，我们的第一篇博客编写完毕。

. 四、浏览博客效果

经过了重重困难，我们终于配置好了我们的博客。深呼吸一口气，让我们一起来见证奇迹的时刻。

打开终端，在我们的myblog目录下执行以下命令

代码语言：javascript复制
$ hexo s # 等同于 hexo server , s 其实就是 server的缩写

执行成功后，控制台将会输出

代码语言：javascript复制
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl C to stop.

sihai

打开浏览器，我们可以看到我们用Hexo搭建好的使用默认主题的博客展现效果。 下面是我的next主题的博客，目前是默认主题，后面的博客将介绍如何更换主题：

. 五、 GitHub 配置

在《 Hexo github搭建个人博客－环境搭建篇 》 一文中，我们对Github有了一个基本的了解，并且已经在本地搭建好了git的基本环境。如果想要发布博文到github上，我们还需要到github上去进行用户的注册。

5.1 注册GitHub

链接: github

1) 点击访问上述链接，如下图点入用户名、邮箱、密码，点击 Sign up for GitHub 按钮进入下一步

SIHAI

2) 如图，选择红色方框中的免费模式，当然如果你有其他需求也可以选择付费的其他模式，点击 Finish sign up 完成注册

SIHAI

3) 完成上述步骤后,你的注册邮箱将会收到一封来自GitHub的验证邮件, 登陆邮箱点击访问邮件中的邮件链接进行验证。 如果你没有收到激活邮件，可以按照下面的步骤说明和图片进行操作：

  • 点击 1 标注处的下拉菜单， 选择 Setting
  • 点击 2 标注处的 Emails
  • 点击 3 标注处的 Resend 重新发送验证邮件

SIHAI

5.2 添加SSH Key

注册完以后，为了让我们的电脑能直接免密码通过SSH访问GitHub，需要将我们的SSH Key添加到GitHub上。 首先我们需要打开终端，跟着下面的步骤进行操作即可。 1) 执行以下命令，检查我们的终端是否已经存在SSH Key

代码语言：javascript复制
$ ls -al ~/.ssh

如果你的电脑已经存在SSH Key，终端将会显示如下图所示的内容, 此时可以跳过 第2步 直接到 第3步 。

代码语言：javascript复制
OUYANGSIHAI:~{k}{e}{v}in${l}{s}-{a}{l}~/.ssh/
total 80
drwx------   9 kevin  staff    306 Aug 23 23:51 .
drwxr-xr-x  45 kevin  staff   1530 Sep  4 00:28 ..
-rw-------   1 kevin  staff   1679 Aug  9  2014 id_rsa
-rw-r--r--   1 kevin  staff    399 Aug  9  2014 id_rsa.pub

2) 执行以下命令生成 SSH Key

代码语言：javascript复制
$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

注意: 我们推荐使用默认的配置，所以接下来如果提示

代码语言：javascript复制
Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]`

或者

代码语言：javascript复制
Enter passphrase (empty for no passphrase): [Type a passphrase]
  # Enter same passphrase again: [Type passphrase again]

我们都直接按Enter即可

3) 添加SSH Key 到 ssh-agent 中

代码语言：javascript复制
$ eval "$(ssh-agent -s)"
$ ssh-add ~/.ssh/id_rsa

4) 复制SSH Key 到 剪贴板中

  • 方式1: 使用pbcopy命令，如果你的电脑不支持该命令，可以使用方式二
代码语言：javascript复制
$ pbcopy < ~/.ssh/id_rsa.pub
  • 方式2: 先使用cat命令读取展现内容到终端，选择终端展现出来的SSH Key复制
代码语言：javascript复制
$ cat < ~/.ssh/id_rsa.pub

5) 添加我们刚才复制的SSH Key到账户中

  • 点击 1 标注处的下拉菜单， 选择 Setting
  • 点击 2 标注处的 SSH Keys
  • 点击 3 标注处的 Add SSH Key ， 这个时候回出现 3 所标注区域的内容
  • Title 处我们可以根据我们的规范随便命名，另外，将我们刚刚复制的 SSH Key 复制到 Key 中
  • 点击 5 标注处的 Add Key 保存

SIHAI

6) 执行以下命令验证SSH Key是否添加成功

代码语言：javascript复制
$ ssh -T git@github.com

执行的时候终端会提示以下内容，我们直接输入yes即可

代码语言：javascript复制
The authenticity of host 'github.com (207.97.227.239)' can't be established.
# RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
# Are you sure you want to continue connecting (yes/no)?

如果添加成功了，终端将会输出

代码语言：javascript复制
Hi username! You've successfully authenticated, but GitHub does not
# provide shell access.

5.3 新建Repository

最后，我们需要创建一个Repository进行我们的博客托管，这个Repository的命名必须遵循以下规范

代码语言：javascript复制
username.github.io

例如，我的用户名是 OUYANGSIHAI，那么我的这个Repository名字就必须是 OUYANGSIHAI.github.io

这里写图片描述

至此，我们关于GitHub的配置已经完成。

. 六、 Hexo 配置

为了让我们能够方便的将博客部署到GitHub中，Hexo提供了 hexo-deployer-git 组件，下面我们来进行简单的说明。

6.1 配置Deploy插件

1) 打开我们的博客根目录下的 _config.yml 文件，设置deploy的信息，注意要讲repository的链接替换成你所见的repository对应的链接

代码语言：javascript复制
deploy:
  type: git                                                      # 设置发布类型，如git     
  repository: git@github.com: OUYANGSIHAI/ OUYANGSIHAI.github.io.git   # 设置repository对应的链接
  branch: master                                                 # 设置提交到的分支
  message: Site updated at {{ now("YYYY-MM-DD HH:mm:ss") }}      # 设置我们提交的信息

6.2 发布

1) 执行以下命令生成博客的静态页面

代码语言：javascript复制
$ hexo g # 等同于 hexo generate, g 就是 generate 的缩写

2) 执行以下命令将我们生成的博客静态页面上传到GitHub

代码语言：javascript复制
$ hexo d # 等同于 hexo deploy, d 就是 deploy 的缩写

3) 打开浏览器访问 username.github.io 即可访问我们刚部署到Github上的博客啦，比如我的就是 OUYANGSIHAI.github.io

以后如果我们再次添加了一篇新的博客，我们只要继续按照上面 第 1 步 第 2 步 进行生成静态页面、部署到GitHub上即可。

如果有遇到一些资源不对或者其他问题时，可以尝试执行以下命令清除已经生成的静态文件，再重新执行上面的 第 1 步 第 2 步 即可。

代码语言：javascript复制
$ hexo clean # 删除已经生成的静态页面

. 七、 结束语

至此，我们已经顺利地利用Hexo github搭建了属于我们自己的个人博客啦，是不是特别简单，以后就可以表现你的才华了，你肯定不差！

至于说，最后博客好不好看，还是要自己去hexo的主题挑选，然后自己去美化和维护，只要用心，一定会不错哦

hexo github git

0 人点赞