Hexo+GitHub博客搭建

  • Hexo框架

  • GitHub 托管

准备工作

主要步骤

创建github项目

登录自己的github

然后右上角选择Create a new respsitory

Repository name处填写yourname.github.io(yourname与你的注册名一致，这个就是你的博客域名)

然后Create repository完成

1、例如我的域名是https://prosscode.github.io/,就填入prosscode.github.io
2、你可以自己选择项目为公开的(public)开始私密的(private)

node.js和Git环境配置

安装Node.js 和 Git从国内下载需要翻墙，这里提供Git国内镜像下载

安装完成后,在开始菜单里找“Git-Git Bash”,打开输入:
$ git config --global user.name "your github username"
​
回车再次输入:
$ git config --global user.email "your github email"
​

​
查看Git配置信息:
$ git config --list
​

1、github username是你的github账号，github email是你的github邮箱

安装Hexo

环境搭建完成后就使用npm安装Hexo，打开cmder输入:
$ npm install -g hexo-cli
​

​

1、Hexo现在最新的版本是3.3.8
2、安装hexo等待的时间会很长，请耐心等待不要关闭安装窗口

博客设置

安装完hexo框架后，在电脑磁盘内新建文件夹，命名为HexoBlog，进入文件夹按住Shift键点击鼠标右键，选择cmder here
​

没有配置cmder环境变量的点击“在此处打开命令窗口”，输入: λ hexo init blog

成功后提示：
INFO Start blogging with Hexo!
接下来输入:
λ hexo generate
λ hexo server

成功提示：

1
2
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

访问localhost:4000就可以看到网站的初始模样
​

​
重新打开cmder输入：
λ ssh-keygen -t rsa -C "Github的注册邮箱地址"

一路Enter，得到信息：
Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.
​
然后找到该文件打开(sublime text)，复制里面所有内容，然后进入Github.settinhs/key，New SSH key—Title：blog—key：输入你刚复制的—Add SSH key
​

1、hexo init name命令会在HexoBlog文件夹下创建一个名为name的文件夹,并初始化hexo设置,并在source目录下自带一篇hello world文章
2、hexo generate命令是生成静态文件，可简写为：hexo g
3、hexo server命令是启动本地服务，可简写为：hexo s
4、访问localhost:4000必须要先执行hexo s

配置博客

在blog目录下，用sublime打开_config.yml文件，配合我的博客信息和注释修改自己的博客信息

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
81
82
83
84
85
86
87
88
89
90
91
92
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site #站点信息
title: PROSS # 标题
subtitle: Great minds have purpose, others have only wishes. # 副标题
description: 心有猛虎  细嗅蔷薇 # 站点描述，给搜索引擎看的
author: 彭爽 # 作者
language: zh-Hans # 语言
timezone: Asia/shanghai # 时区

# URL #链接格式
## 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: 
tag_dir:  # 标签目录
archive_dir: archives # 存档目录
category_dir: categories # 分类目录
code_dir: downloads/code

# Directory # 目录
source_dir: source # 源文件目录
public_dir: public # 生成的网页文件目录

# Writing #写作
new_post_name: :title.md # File name of new posts #新文章标题
default_layout: post #默认的模板包括post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false # Transform title into titlecase #标题转换成大写
external_link: true # Open external links in new tab #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight: # 语法高亮
  enable: true # 是否启用
  line_number: true # 显示行号
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag #分类和标签
default_category: uncategorized # 默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁止分页
0: 全部禁用
archive: 2
category: 2
tag: 2

# 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: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: HH:mm:ss

# Pagination # 分页
## Set per_page to 0 to disable pagination
per_page: 10 # 每页文字数，设置为0则是禁止分页
pagination_dir: page

# Disqus #评论
disqus_shortname:

# Extensions # 拓展插件
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #主题
exclude_generator:
plugins: # 插件，例如生成RSS和站点地图

# Deployment # 部署
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/prosscode/prosscode.github.io.git
  branch: master

着重几点介绍：

  • 修改网站相关信息

    1
    2
    3
    4
    5
    6
    title: PROSS
    subtitle: Great minds have purpose, others have only wishes. 
    description: 心有猛虎  细嗅蔷薇
    author: 彭爽 
    language: zh-Hans
    timezone: Asia/shanghai

  • 配置部署（我的是prosscode，修改成自己的）

    1
    2
    3
    4
    deploy:
      type: git
      repo: https://github.com/prosscode/prosscode.github.io.git
      branch: master

1、_config.yml文件中每个参数的：后都要加一个空格

发表文章

在cmder或cmd中输入：λ hexo new "prosscodeTestArticle"

得到结果：INFO Created: F:\test\blog\source\_posts\prosscodeTestArticle.md

找到该文章，打开，使用markdown语法，该语法可以查看Markdown入门

1
2
3
4
5
6
7
8
---
title: prosscodeTestArticle
date: 2017-09-02 17:56:09
tags:
categories:

---
This is a test article, welcome to focus on the author blog [1]: https://prosscode.github.io/

然后保存，执行下列步骤：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
C:\HexoBlog\blog
λ hexo clean
INFO  Deleted database.
INFO  Deleted public folder.
`
C:\HexoBlog\blog
λ hexo generate
INFO  Start processing
INFO  Files loaded in 1.48 s
...
INFO  29 files generated in 4.27 s
`
C:\HexoBlog\blog
λ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

这个时候，打开localhost:4000，发现刚才的文章已经成功了

1、hexo clean 清除缓存，网页正常显示的情况下可以不用

发布

刚我们只是在本地查看了博客，现在我们发布到网上，执行：

1
2
3
4
5
6
7
8
9
10
C:\HexoBlog\blog
npm install hexo-deployer-git --save
...

C:\HexoBlog\blog
λ hexo deploy
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
...

跳出Github登录，直接登录

然后输入进入浏览器输入https://yourname.github.io/

然后就可以看到已经发布了

我的测试博客

1、部署前需要安装hexo-deployer-git。在此前版本模块功能是集成在hexo框架里，现在模块功能分开了，需要先安装再部署
2、hexo deploy部署，可简写为：hexo d

总结

发布文章的步骤：
1、hexo new 文章名
2、Markdown语法编辑文章
3、部署发布

简写Tips

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

到这里已经完成了博客的搭建，但是还有很多需要设置和调整的。

也许你会发现，我的博客和刚刚搭建的不太一样，因为我修改了博客主题，增加了一些插件。

提供几个比较好的博文和主题推荐：
1.Hexo主题介绍

2.开始使用NexT主题，我正在使用NexT主题下的NexT.Pisces v5.1.2。

3.Hexo的next主题个性化教程：打造炫酷网站

4.Markdown编写推荐Typora和MarkdownPad2

​