记录寄己走过的路

Hexo(Pages)—博客搭建同步GitHub&Coding

发表于 | 分类于 | | 阅读
字数 6,844 | 时长 28

给自己一个记录 知识 和 时间 的空间。


引导

给自己一个记录知识和时间的空间 –> 对你有新思想 或是 习惯 ！，拥有一个这样的独立而自由的空间是一件非常有趣的事情。

每个优秀的程序员（、📱）在成长过程都有许多个人的体会与感悟，这些感悟让他走的更远，而通常个人博客就是这样一个记录个人成长的地方。Ta，给了你分享成长的机会；

博客效果.gif

目录：

  1. 个人博客搭建方案
  2. 创建 GitHub 仓库
  3. 本地环境的准备工作
  4. 配置本地和Github的ssh传输连接
  5. 配置本地和Coding的ssh传输连接
  6. Hexo的上线部署
  7. Next 主题安装
  8. Next 主题博客的站点配置
  9. Next 主题博客的主题配置
  10. 创建分类界面
  11. 创建标签界面
  12. 写博客与发布
  13. 多终端编辑hexo博客(多台电脑)
  14. Hexo常用命令笔记
  15. 域名配置
  16. Hexo博客搭建被坑蛋疼的报错解决集合
  17. 优化博客设置「持续更新」

个人博客搭建方案

跟着我做，很简单几分钟你即可拥有自己的个人博客（Hello World 版）。试试吧！

1.创建 GitHub 仓库
  • 首先你需要拥有一个GitHub账号，注册或者登录 GitHub
  • 创建仓库：
    创建仓库1.png
  • 填写仓库名称：
    仓库名称2.png
    注意点： Respository name 中一定要输入：你的用户名.github.io。（用户名即仓库名下面会用到）其他地方不用修改，然后直接点 Create repository“按钮完成创建即可。
2. 本地环境的准备工作

主要以Mac操作进行讲解；

Git安装
  • Git已帮大家下载好了，只需去百度云下载一份安装即可，也可去Git官网下载；
  • 安装：直接双击 dmg 文件安装即可。
Nodejs安装
  • 两种方式：其一去百度云下载一份直接安装；其二去Nodejs官网下载。
  • 说明：Nodejs也可使用Nodejs版本管理器nvm安装，考虑其安装过程中存在的问题较多，操作流程也多，笔者不推荐大家使用这种方式安装。
Hexo 安装

Hexo 是搭建的主角，先打开 Hexo 官网。

  • 打开终端，输入Hexo的安装命令：

    1
    npm install hexo-cli -g

  • 若此命令安装不成功时，出现错误
    安装Hexo出现错误.png
    解决方法：可输入下面的命令和开机密码继续完成安装：

    1
    sudo npm install --unsafe-perm --verbose -g hero
本地博客仓库

  • 在你本地创建个你希望存储博客文件夹，打开终端，定位到存储博客的目录下，如下所示：
    定位到存储博客的目录.png

  • 执行Hexo命令，初始化本地博客仓库：

    hexo init 你的用户名.github.io // 尽量和在上面创建的Github仓库使用同一个名称（我在这就坑了一次，建议使用同一个名称）

博客效果预览
  • 上述步骤完成后，基本的博客框架就已经搭建完了，Hexo安装完成后默认使用 landscape 主题；
  • 在终端定位到 cd xxx.github.io 文件夹下，并在终端输入下面的命令就能启动服务预览功能；
    1
    hexo s --debug  # 启动服务预览

启动服务预览效果.png

接着来. . .

3. 配置本地和Github的ssh传输连接

  • 首先我们需要检查你电脑上现有的ssh key：
1
2
3
4
cd ~/. ssh 
检查本机的ssh密钥
如果提示：No such file or directory 说明你是第一次使用git。
  • 生成新的SSH Key：
    打开终端输入 ssh-keygen -t rsa -b 4096 -C "你注册Github时的邮箱" ，回车之后系统显示 Enter file in which to save the key(/xxx/.ssh/id_rsa): 我们记住（）中的地址是保存私钥保存地址及文件，之后继续一路回车到结束。
  • 注意：输入密码的时候没有*字样的，你直接输入就可以了。最后看到这样的界面，就成功设置ssh key了：

  • 然后 sudo cat /Users/your_user_directory/id_rsa.pub ，(提示把中间的 Users/your_user_directory/id_rsa替换成你上一步生成的地址) ，回车后把终端上显示的一大段就是 SSH Key 结果复制下来。
  • 登陆github，在下拉菜单中点击Settings，在左侧栏中点击SSH and GPG keys，再点击右侧的New SSH key按键。此时我们可以看到下图情况，Title给这个key起个别名，在Key中，粘贴进去我们之前一步从终端保存下来的那一大段密钥。之后点击下方Add SSH key
  • 现在我们测试一下本地和github的ssh配置是否正确，打开终端输入 ssh -T git@github.com，输入密码后，如果你看到了一句提示信息: Hi (你的注册用户名)! You've successfully authenticated, but GitHub does not provide shell access.
    那么说明已经配置好了github远程仓库与本地。

4.配置本地和Coding的ssh传输连接

  • 登录 Coding 官网，注册账号登录，点击添加项目，【项目名称填写：自己设计的名称.coding.me。(ps:这就是我们Github上个人博客的二级域名，需要把它记录下来，后面需要用)，选择*私有或者公开，点击底部的创建项目。
  • 然后 sudo cat /Users/your_user_directory/id_rsa.pub ，(提示把中间的 Users/your_user_directory/id_rsa替换成你上一步生成的地址) ，回车后把终端上显示的一大段就是 SSH Key 结果复制下来。
  • 点击右上角用户头像，点击左边栏的账户–>SSH 公钥，把上步的 SSH Key 粘上。（提示可以看到ssh key最后的邮箱，此时GitHub和Coding是同一个注册邮箱），点击永久有效，点击添加项目。

补充：多个SSH私钥配置经验

  • 设置多个私钥
    如果你的Coding 和 Github的注册邮箱不能满足一样，或者说他们有各自的ssh私钥。我们通过配置ssh连接时候，更换不同私钥文件名称来分别存储。
  • （ps:如果你Github已经本地生成了私钥，这块可以不做，但是coding部分的私钥文件名要区分你之前的私钥文件名）终端输入$ ssh-keygen -t rsa -b 4096 -C “你注册Github时的邮箱”，终端显示Enter file in which to save the key(/xxx/.ssh/id_rsa):id_rsa_github这里代表着，你的github远程仓库绑定的是这个邮箱，私钥名称为*id_rsa_github之后继续连续回车到结束。
  • 建立Coding的ssh私钥终端输入$ ssh-keygen -t rsa -b 4096 -C “你注册Coding时的邮箱”，终端显示Enter file in which to save the key(/xxx/.ssh/id_rsa):id_rsa_coding这里代表着，你的coding远程仓库绑定的是这个邮箱，私钥名称为id_rsa_coding之后继续连续回车到结束
  • 在本地保存ssh私钥文件所在的目录新建一个config配置文档，以我的为例终端输入$ vim ~/.ssh/config
    ，里面填写如下内容，其中IdentityFile是你自己存放ssh私钥的文件名和文件路径，切记。
1
Host github.com HostName github.com User git IdentityFile /home/redredleaf/.ssh/id_rsa_githubHost coding.net HostName coding.net User git IdentityFile /home/redredleaf/.ssh/id_rsa_coding
  • 上面两步操作完后，我们的私钥文件所在目录的结构是：
  • 注意权限
    如果你在$ ssh-keygen -t rsa -b 4096 -C “你注册Github时的邮箱”，这步的时候用了sudo，或者在root用户下执行的，那么你后续的ssh连接和hexo本地提交到远程仓库的命令都必须都是在root权限下执行，否则会出现Permission denied (publickey)的情况。

5.Hexo的上线部署

  • 登陆coding后，点击左侧栏的项目–>点击建立的项目–>点击左侧栏的代码 ，之后页面中就能找到ssh的连接了

  • 登陆github后，点击右上角自己的头像–>点击Your profile–>点击你的博客远程仓库，页面中就能找到ssh的连接了

  • 打开【站点配置文件 _config.yml】

1
2
3
4
5
6
7
8
9
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
        coding: 你的coding远程仓库ssh连接地址
        github: 你的github远程仓库ssh连接地址
  branch: master

记得 cmd+s，保存

  • 然后执行 hexo clean && hexo g && hexo d，再然后输入 你的博客项目名称.github.io，当成功看到Hexo的hello world的页面，这代表你的Github与Coding配置Hexo站点成功啦啦。

6. Next 主题安装

  • Next主题是 iissnan 所创作的一个Hexo主题，以简洁为主；
  • 安装：在终端定位到xxx.github.io目录下，执行下面的命令后，稍等片刻，主题就下载到对应的位置；
    1
    2
    cd xxx.github.io
    git clone https://github.com/iissnan/hexo-theme-next themes/next

主题下载后的目录.png

7.Next 主题博客的站点配置

首先，复制一份打开本地博客目录下的 _config.yml 文件，做为备份，以防改错

  • 站点配置文件：打开之前的xxx.github.io文件夹，找到 _config.yml 即为站点配置文件，选中该文件->右击->打开方式->文本编辑（也可以选择Sublime打开），打开后就可以修改基本的博客配置了；（注意一下：在配置文件里‘#’就是注释符，相当于C语言中的‘//’）
    Next站点配置.png

注意：该配置文件中的键值之间一定要加空格。

关于 Hexo 配置的详细信息请前往 Hexo的官方文档(简体中文)。

站点配置文件详细配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 
title: xxx # 博客的名字，也称站点名称
subtitle: xxx # 副标题
description: xxx # 对站点的描述，搜索引擎会抓取，可以自定义
author: xxx # 作者名字
language: zh-Hans # 语言 简体中文
timezone:  # 用默认的即可
# URL 
# 这项暂时不需要配置，绑定域名后，要创建 sitemap.xml 时再配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory # 目录，不要修改
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing 
# 文章布局、写作格式的定义，不修改
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format 
# 日期 / 时间 格式，不要修改
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: MMM D YYYY
time_format: H:mm:ss
# Pagination 
# 每页显示文章数，可以自定义
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions 
# 配置站点所用主题和插件，这里将默认主题注释，修改为 next
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
#theme: landscape
# Deployment
# 本地博客部署到 github 上要配置这里
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git  #git提交
  repo: https://github.com/CustomPBWaters/CustomPBWaters.github.io.git
  # 已创建的Github仓库

prompt：配置好站点配置文件，就可以预览一下博客的效果了，步骤如下：
在终端定位到 xxx.github.io 文件夹下，并在终端输入下面的命令就能启动服务预览功能；

1
hexo s --debug  # 启动服务预览

启动成功可以看到提示，按照提示用浏览器打开提示网址，即可看到你的本地博客了，里面有一篇 Hello World
hexo s --debug 命令成功提示.png

看完效果之后继续学习下面的内容…

8.博客的 Next 主题配置

  • 主题配置文件在：xxx.github.io/themes/next/_config.yml 目录下，老规矩，先备份一份 以防改错，当然，最权威的是看 官方 的说明文档，我在这里提供一个示例，供大家参考；

  • 温馨提示：你可以在/next/_config.yml，复制下面的键，回车找到对应的值修改，—>方便 快捷；没修改完一个之后你都可以预览👀一下效果的hexo s –debug
    主题修改键值.png

  • 关于主题需配置的选项略多，故采取分条讲解的形式，具体如下：

1.设置头像

1
2
3
# 头像 注意：在站点下的 :/next/source/images，
avatar: /images/avatar.jpg # 修改头像

2. 设置关键字

1
2
# Set default keywords (Use a comma to separate)
keywords: “iOS, 程序员”     # 修改关键字

3. 设置博客的开始时间

1
2
# Specify the date when the site was setup
#since: 2016   # 设置博客的开始时间

4. 菜单栏的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# ------------------------------------------------        ---------------
# Menu Settings
# 菜单栏的设置
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
    home: / # 在菜单上显示首页
    archives: /archives # 在菜单显示全部(归档)
    categories: /categories # 在菜单上显示分类
    tags: /tags # 在菜单上显示标签
    #search: /search # 搜索
    about: /about # 在菜单上显示关于
    #sitemap: /sitemap.xml
    #commonweal: /404.html

5. 菜单栏的图标设置：可从 Font Awesome （简体中文）网站查询图标对应的名称填入到对应的菜单项即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 菜单栏的图标设置,规则为：菜单（左）：图标名（右）
menu_icons:
    enable: true
    home: home # 首页
    archives: archive # 全部(归档)
    categories: th # 分类
    tags: tags # 标签
    #search: search # 搜索
    about: user # 关于
    # schedule: calendar # 时间表
    # sitemap: sitemap # 网站地图
    # commonweal: heartbeat # 公益
    # KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome # 键映射到菜单项键

6. 设置博客的外观

1
2
3
4
# Schemes
#scheme: Muse   #默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
scheme: Mist  #Muse 的紧凑版本，整洁有序的单栏外观
#scheme: Pisces  #双栏 Scheme

7. 设置社交链接（设置了Github、微博）

1
2
3
4
5
6
7
8
9
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
# 设置社交链接（如:Github、微博）,这里下面一定要空两格
social:
    # LinkLabel: Link
    GitHub: https://github.com/CustomPBWaters
    Weibo: http://weibo.com/JacklinIOS/profile?rightmod=1&wvr=6&mod=personinfo
    # JianShu:

1
2
3
4
5
6
7
8
9
10
# Social Links Icons
# 设置社交链接对应的图标
social_icons:
    enable: true
    # Icon Mappings.
    # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
    GitHub: github
    Twitter: twitter
    Weibo: weibo
    #JianShu: heartbeat
1
2
3
4
5
6
7
# Blogrolls # 设置友情链接
links_title: Links
#links_layout: block
#links_layout: inline
links:
    #Title: http://example.com/
    白开水简书: http://www.jianshu.com/users/fd745d76c816/latest_articles

8. 设置侧栏的方向（设置成左侧）

1
2
3
4
5
# 设置侧栏的方向（设置成左侧）
sidebar:
    # Sidebar Position, available value: left | right
    position: left
    #position: right

9. 设置博客中代码高亮显示

1
2
3
4
5
6
# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
# 代码高亮主题
highlight_theme: normal

10. 设置微信支付宝赞赏功能

1
2
3
4
5
6
7
# 打赏配置
# 打赏说明文本
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
# 微信收款二维码
wechatpay: /uploads/money/wechat-reward-image.jpg
# 支付宝收款二维码
alipay: /uploads/money/alipay-reward-image.jpg

9. 设置微信公众号订阅

1
2
3
4
5
# 设置微信公众号订阅
#wechat_subscriber:
    enabled: true
    qcode: /uploads/money/alipay-reward-image.jpg
    description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

10. 添加网页计数器-不蒜子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 添加网页计数器-不蒜子
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
    enable: true
# custom uv span for the whole site
    site_uv: true
    site_uv_header: <i class="fa fa-user"></i> # 本站总访问数
    site_uv_footer: 人
# custom pv span for the whole site
    site_pv: true
    site_pv_header: <i class="fa fa-eye"></i> # 本站总访问量
    site_pv_footer: 次
# custom pv span for one page only
    page_pv: true
    page_pv_header: <i class="fa fa-eye"></i> # 本文阅读量
    page_pv_footer: 次

11. 设置是否显示阅读全文

1
2
3
4
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.auto_excerpt: 
enable: true # 设置是否显示阅读全文，文章较多的话，有必要设置为 
true length: 200

13. 设置网站logo
通过网站favicon在线制作 制作favicon图片，logo最好设置32*32。
next主题：将图片放在next主题source/images目录下

1
2
# 在next主题配置文件中添加：
favicon: /uploads/images/favicon.png

13. 站点头像改成圆形
在themes/next/source/css/_common/components/sidebar/sidebar-author.styl 中.site-author-image定义中增加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
  -webkit-animation: play 2s ease-out 1s 1;
  -moz-animation: play 2s ease-out 1s 1;
  animation: play 2s ease-out 1s 1; 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}
.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

14. 加入站点内容搜索功能
本站点使用的是Local Search。加入站点内容搜索功能步骤如下：
需要：安装hexo-generator-searchdb

1
npm install hexo-generator-searchdb --save

在站点 XXX.github.io/_config.yml 中添加search字段，如下：

1
2
3
4
5
6
# 站点内容搜索功能
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

15. next主题添加背景图片
1.找到一个背景图片放到 hexo（hexo工程文件）-> themes -> next -> source -> Bgimage（存放背景图片的文件） 的路径下；
添加背景图片.png

1
2
3
4
5
6
/themes/next/source/css/_custom/custom.styl
// Custom styles.
#body {
#  background:url(http://upload-images.jianshu.io/upload_images/2230763-265f0df7e75d706a.gif?imageMogr2/auto-orient/strip);
#  background-attachment: fixed;
#}

16. 底部logo栏更改
找到 /themes/next/layout/_partials/ 下面的 footer.swig文件，打开会发现，如下图的语句：
底部logo栏更改.png

  • 第一个框，是下面的“日期 ❤️ XXX”
  • 第二个框，是图当中 “由Hexo驱动” 的Hexo链接
  • 第三个框，是“主题-Next.XX”

修改底部中文.png

9.创建分类界面

先看下效果：
分类可以多级.png

  • 打开终端，定位到xxx.github.io目录下；

  • 执行下面的命令，新建一个名为categories的页面；

    1
    hexo new page categories

  • 创建完成后，在对应的目录下找到index.md文件，进行如下的修改：

    1
    2
    3
    4
    5
    6
     ---
    title: categories # 分类名字（可为空）
    date: 2016-06-15 08:17:00
    type: "categories" # 将页面的类型设置为 categories,主题将自动为这个页面显示所有分类
    comments: false # 如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，设置为 false
     ---

10.创建标签界面

先看效果：
标签.png

  • 打开终端，定位到xxx.github.io目录下；

  • 执行下面的命令，新建一个名为tags的页面；

    1
    hexo new page tags

  • 创建完成后，在对应的目录下找到index.md文件，进行如下的修改：

    1
    2
    3
    4
    5
    6
     ---
    title: tags # 标签名字（可为空）
    date: 2016-08-20 22:17:49
    type: "tags" # 将页面的类型设置为 tags,主题将自动为这个页面显示为标签云
    comments: false # 如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，设置为 false
     ---
注意点

  • 格式：再次强调，设置项的键值之间一定要有空格
    类似这种的前面也要空两格.png

  • 关于第三方服务的 ”duoshuo_info“
    在配置该项的时候，user_id 键对应的值不要修改，也就是保持为 0，具体原因我不清楚；

  • 分类和标签云页面
    首先，要使用” hexo new page “命令生成这两个页面，否则报404。其次，这两个页面是主题自动维护的，只要我们的文章按照规矩来就行了；

11.写博客与发布

经过上述步骤，本地博客和主题设置已经完成，那么接下来就是写博客了;

温馨提示：你的博客文件需要存放到 xxx.github.io/source/_posts 文件夹中，在该文件夹下面你可以按照你的博客分类建立一系列的文件夹来管理博客原文件；
本地博客目录.png

操作步骤

1. 用 Markdown 写文章
不管你用什么编辑 Markdown 文件，最后生成的 md 文件放到 xxx.github.io/source/_posts 文件夹或其子文件夹中即可，如：

1
2
3
4
5
6
7
8
9
10
---
title: 个人博客搭建详解（Windows和Mac通用版） # 这是标题
date: 2016-05-20 11:26:00 # 这个时间就是本篇文章创建时间 ^_^. 可以自定的。
categories:  # 这里写的分类会自动汇集到 categories 页面上，分类可以多级
- 博客搭建 # 一级分类
- Next主题配置 # 二级分类 
tags: # 这里写的标签会自动汇集到 tags 页面上
- 博客搭建 # 可配置多个标签，注意格式
- Next主题配置
---

温馨提示

分类和标签是自动维护的，关键是的文章要按照规定的格式写，如上格式，可以参考. Next 主题会自动生成目录，这也省了不少事;

2. 在本地运行测试
在终端上定位到xxx.github.io目录下，输入命令：

1
hexo s --debug

3. 在浏览器查看效果
在浏览器输入http://localhost:4000/ 即可看到博客的效果

4. 安装自动部署发布工具

1
sudo npm install hexo-deployer-git --save

5. 发布到 GitHubPages
当在本地确认博客效果后，就可以将md文件生成静态网页上传至GithubPages，在终端定位到xxx.github.io目录下，执行下面的命令即可：

1
2
3
4
5
6
hexo clean # 清除缓存 网页正常情况下可以忽略此条命令
hexo g # 生成静态网页
hexo d # 开始部署
也可以一次性执行
hexo clean && hexo g && hexo d

温馨提示
如果是第一次部署，终端会提示要求输入用户名和密码。等命令执行完之后，过几分钟打开 http://xxx.github.io 即可看到你的个人博客了。以后要发布新文章，执行上述命令即可;

12.多终端编辑hexo博客

摘录原地址：http://www.jianshu.com/p/4f9fc8aafe15

之前就想到了一个问题，如果我想要在公司写博客怎么办，或者说如果我换电脑了怎么办，因为在github中的我们github.io项目是只有编译后的文件的，没有源文件的，也就是说，如果我们的电脑坏了，打不开了，我们的博客就不能进行更新了，所以我们要把我们的源文件也上传到github上，这道题的解题思路（哈哈，突然想到这个词了）是，将我们的源文件上传至username.github.io的Hexo分支，并且设置为默认分支（分支需要自己创建），然后对我们的源文件进行版本管理，这样我们就可以在另一台电脑上pull我们的源码，然后编译完之后push上去。

更为优雅的方式是使用travis-ci，然后用webhook自动部署。你只需要写markdown，push到github就行了。根本不用关心deploy，只要维护你的markdown就行。详情请参考：http://blog.bigruan.com/2015-03-09-Continuous-Integration-Your-Hexo-Blog-With-TravisCI/

创建Hexo分支

创建两个分支：master 与 Hexo,并将Hexo设置为默认分支（这个Hexo分支就是存放我们源文件的分支，我们只需要更新Hexo分支上的内容据就好，master上的分支hexo编译的时候会更新的）

删除文件夹内原有的.git缓存文件夹并编辑.gitignore文件

因为有些主题是从git上clone过来的，所以我们要先删除.git缓存文件，否则会和blog仓库冲突（.git默认是隐藏文件夹，需要先开启显示隐藏文件夹。.git文件夹被删除后整个文件对应的git仓库状态也会被清空)
.gitignore文件作用是声明不被git记录的文件，blog根目录下的.gitignore是hexo初始化带来的，可以先删除或者直接编辑，对hexo不会有影响。建议.gitignore内添加以下内容：

1
2
3
4
/.deploy_git
/public  
/_config.yml
.deploy_git是hexo默认的.git配置文件夹，不需要同步

public内文件是根据source文件夹内容自动生成，不需要备份，不然每次改动内容太多
即使是私有仓库，除去在线服务商员工可以看到的风险外，还有云服务商被攻击造成泄漏等可能，所以不建议将配置文件传上去

初始化仓库

然后我们再初始化仓库，重新对我们的代码进行版本控制

1
2
3
git init
git remote add origin <server>
<server>是指在线仓库的地址。origin是本地分支,remote add操作会将本地仓库映射到云端
将博客源文件上传至Hexo分支

依次执行

1
2
3
git add .
git commit -m "..."
git push origin hexo

提交网站相关的文件；

对B电脑进行的操作

假设B电脑现在没有我们的源文件

1
2
3
4
git init
git remote add origin <server> #将本地文件和云端仓库映射起来。
git fetch --all
git reset --hard origin/master

13.Hexo常用命令笔记

  • hexo安装升级

    1
    2
    3
    npm install hexo -g #安装  
    npm update hexo -g #升级  
    hexo init #初始化

  • 常用简写

    1
    2
    3
    4
    5
    hexo n "我的博客" == hexo new "我的博客" #新建文章
    hexo p == hexo publish
    hexo g == hexo generate#生成
    hexo s == hexo server #启动服务预览
    hexo d == hexo deploy#部署

  • 启动本地服务

    1
    2
    3
    4
    hexo server #Hexo #会监视文件变动并自动更新，您无须重启服务器。
    hexo server -s #静态模式
    hexo server -p 5000 #更改端口
    hexo server -i 192.168.1.1 #自定义 IP

  • 监视文件变动

    1
    2
    3
    hexo generate #使用 Hexo 生成静态文件快速而且简单
    hexo generate --watch #监视文件变动
    hexo clean #清除缓存 网页正常情况下可以忽略此条命令

  • 部署

    1
    2
    3
    4
    5
    #两个命令的作用是相同的
    hexo generate --deploy
    hexo deploy --generate
    hexo deploy -g
    hexo server -g

  • 草稿

    1
    2
    3
    4
    # 新建草稿
    hexo new draft <title>
    # 发布草稿为post
    hexo publish draft <title>

  • 模版

    1
    2
    3
    4
    5
    6
    7
    8
    hexo new "postName" #新建文章
    hexo new page "pageName" #新建页面
    hexo generate #生成静态页面至public目录
    hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
    hexo deploy #将.deploy目录部署到GitHub
    hexo new [layout] <title>
    hexo new photo "My Gallery"
    hexo new "Hello World" --lang tw

  • 写作时间

    1
    2
    3
    4
    5
    6
    7
    变量	描述
    :title	标题
    :year	建立的年份（4 位数）
    :month	建立的月份（2 位数）
    :i_month	建立的月份（去掉开头的零）
    :day	建立的日期（2 位数）
    :i_day	建立的日期（去掉开头的零）

14.域名配置

注册购买

我们先到阿里云官网注册一个帐号(官网地址)
之后打开 域名购买地址，根据个人喜好选后缀为什么的顶级域名。如：.me .cn .com

DNS域名解析

再登陆回我们的阿里云到首页，点击右上角的控制台，继续点击左侧栏域名与网站(万网)–>域名.

这里我们看到刚刚购买的域名了，点击域名那行尾部的解析，之后我们就跳转配置解析页面。我们继续点击红色添加解析按键，若有认证信息请自己通过

❄︎ 本文结束    感谢简阅 ^_^. ❄︎

本文标题:Hexo(Pages)—博客搭建同步GitHub&Coding

文章作者:寄己的路

原始链接:https://sunyonghui.github.io/HexoBlog/HexoPagesSetup.html

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际 本博客所有文章除特别声明外均为原创，转载务必请「注明出处链接(可点击) - 作者」，并通过E-mail等方式告知，谢谢合作！