WIN下从零搭建个人博客

1. 前言

耗时两天搭建了一个个人博客：adgnn的个人博客

本博客是搭建在github page上的，没有购买个人域名，所以不需要花钱就可以搭建一个属于自己的博客。

本博客仅说明WINDOWS环境下的博客搭建

2. 准备 - 需要下载的工具

Git （官网点击Download即可下载，安装完后就可以使用Git Bash命令行工具进行操作。）

NodeJS (LTS栏里点击Windows即可下载)

VPN（最好在能够访问外网的情况下安装，可忽略）

notepad++（更好的文本/代码编辑软件，可忽略）

3. 安装hexo

  1. 在某个地方创建一个文件夹（如G:\myblog\）（名字随意）

  2. 右键这个文件夹，选择Git Bash Here

  3. 在打开的命令行窗口内输入命令安装hexo

1
npm i -g hexo-cli
  1. 初始化hexo于myblog文件夹
1
hexo init
  • myblog自己想取什么名字都行
  1. 安装
1
npm i

4. Github创建个人仓库

网站链接：Github

  1. 注册Github帐号（记住你的用户名和注册用的邮箱，之后要用）
  2. 登录
  3. 点击New repository1556889333979
  4. 创建一个和自己用户名相同的仓库，即用户名.github.io （如本人用户名是adgnn，则创建名为adgnn.github.io的仓库）
  5. 点Create repository

5. 生成SSH并添加到Github

SSH是你电脑Git和Github连接的钥匙，请按如下步骤配置。

  1. 回到Git Bash窗口，输入代码表示你的用户名和注册邮箱
1
2
git config --global user.name "yourname"
git config --global user.email "youremail"
  • 双引号””中的yourname替换成你的用户名
  • 双引号””中的youremail替换成你的注册邮箱
  1. 创建SSH
1
ssh-keygen -t rsa -C "youremail"
  • 双引号””中的youremail替换成你的注册邮箱

  • 之后弹出的信息不需要输入任何东西，一直回车直到命令执行完毕。

  • 执行完毕后，在命令行窗口里找到.ssh的文件夹，打开“此电脑”（或资源管理器），输入这个地址，回车1556889824319

  1. 用记事本打开id_rsa.pub备用

  2. 打开Github网页，点右上角自己的头像—settings—找到SSH设置选项，点击New SSH Key，把你的id_rsa.pub的信息复制进去1556890027211

  3. 在Git Bash检查是否成功
1
ssh -T git@github.com

6. 安装主题文件

本人的博客使用的主题是Yilia，简洁清新，功能实用。本篇以Yilia的安装为例。

  1. Git Bash输入
1
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
  • 这个命令的功能是将github上的yilia项目clone（克隆）到你的themes目录下面
  • 如果你觉得Git Bash的下载太慢，可以点这里 打开项目页面, 点击Clone or download ，Download ZIP，将下载好的ZIP文件里的hexo-theme-yilia-master文件夹解压到\myblog\themes\下，并改名为yilia。

7. 配置_config.yml

安装好主题文件后，我们的myblog目录下一共会有两个_config.yml

一个在\myblog\下，另一个在\myblog\themes\yilia\下

为了避免混淆，将前者称为全局配置文件，后者称为主题配置文件。

我们绝大部分自定义内容都是在_config.yml里修改的。

  1. 用记事本分别打开全局配置文件和主题配置文件
  2. 下面是我的全局配置文件，请参考我的配置文件对自己的配置文件修改。（可参考官方说明）（请将所有和本作者有关的内容照例改成自己的）
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: adgnn的个人博客
subtitle: 
description: adgnn的个人博客
keywords: blog, 博客
author: adgnn
language: zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://adgnn.github.io
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: :year-:month-:day-: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: 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:

# 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
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
plugin:
- hexo-generator-feed
- hexo-generator-json-content
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
## Themes: https://hexo.io/themes/
theme: yilia

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

# JsonContent
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: true
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true
  1. 下面是我的主题配置文件，请参考并修改自己的配置文件。
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
# Header

menu:
  主页: /
  归档: /archives/index.html
#  Blogger: https://adgnn.github.io

# SubNav
subnav:
  github: "https://github.com/adgnn"
  #weibo: "#"
  rss: "/atom.xml"
  #zhihu: "#"
  #qq: "#"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  #mail: "mailto:litten225@qq.com"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: /

# Content

# 文章太长，截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: true
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 0
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: 
# 微信二维码图片地址
weixin: 

# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 2
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: '3224e7c6943d5a59748736b64c978518'
google_analytics: ''
favicon: 

#你的头像url
avatar: /img/portrait.jpg

#是否开启分享
share_jia: false

#评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
disqus: false

#5、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: true

# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  #friends: '友情链接'
  aboutme: '关于我'

friends:
 # 友情链接1: http://localhost:4000/
 # 友情链接2: http://localhost:4000/
 # 友情链接3: http://localhost:4000/
 # 友情链接4: http://localhost:4000/
#  友情链接5: http://localhost:4000/
#  友情链接6: http://localhost:4000/

aboutme: 这里是adgnn的随手Blog
  • 注意本文件里的baidu_analytics后面的数字是本人的百度分析代码，自己修改时请去掉或替换成自己的代码（参考本文末参考文章1）

8. 安装RSS、Sitemap、hexo-asset-image等插件

1
2
3
npm i hexo-asset-image
npm i hexo-generator-feed
npm i hexo-generator-sitemap
  • RSS插件可让别人订阅你的Blog，详见本文档后面。
  • hexo-asset-image插件可以让你用![logo](logo.jpg)的方式插入图片。

9. 在本地查看自己的页面

  1. 在Git Bush输入
1
2
3
hexo clean
hexo g
hexo s
  1. 打开浏览器，地址栏输入
1
localhost:4000

即可在浏览器预览自己的博客页面。

10. 将 hexo部署到Github

  1. 用记事本配置全局配置文件（_config.yml），该步已在第7步完成（请再次确认）
1
2
3
4
depoy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

  • 注意：type、repo、branch前面要空2个空格，冒号: 后面要空1个空格

  • 将YourgithubName替换成你的Github用户名。

  1. 在Git Bash安装deploy-git
1
npm i hexo-deployer-git --save
  1. 部署到Github
1
2
3
hexo clean
hexo g
hexo d
  • hexo clean：清除之前生成的缓存
  • hexo g：（generate）生成静态文章
  • hexo d：（deploy）部署文章
  • 在执行hexo d的时候，第一次执行需要输入你的Github用户名和密码。
  • 得到下图说明部署成功1556891706124
  • 部署成功后，等1分钟，就可以登录你的页面https://yourname.github.io查看了。

11. 写自己的文章

  1. 使用markdown编辑器（markdown请自行上网搜索了解，推荐Typora）编辑保存自己的文章。
  2. 保存命名为如下形式：20xx-x-x-标题.md，部署以后网站会自动读取日期和标题。
  3. 可在文件最前面加上yaml头部，如下格式：
1
2
3
4
5
---
title: 从零搭建个人博客  #标题
tags: [hexo, github]  #标签
toc: true             #开启文章目录
---
  1. 将文件保存到\myblog\source\_posts\下
  2. 重新部署hexo到github上（第10-3步）（PS：每次更新都要重新部署）

最后的话

本篇仅针对使用windows系统的小白，主要参考以下文章：

  1. hexo史上最全搭建教程
  2. Hexo Blog搭建记录)

想要更深入了解请务必进入第1篇文章查看。

与本文相比，该文章还讲了：设置个人域名，yml参数含义，主题定制，RSS具体说明，github分支操作，coding page部署实现国内外分流，SEO优化，评论系统等