搭建个人博客流程

序言

新的历程，新的开始！

第一章 博客初始化

内容

1.1 nodejs下载

网址-nodejs.org,进入网页后下载长期支持版（LTS）
安装完毕后，会有两个文件夹，node和npm（可在终端进行查看版本，确认安装成功）

1.2 安装淘宝镜像源

进入终端，并执行sudo su进入超级用户后，再在终端进行命令操作
npm install -g cnpm –registry=https://registry.npm.taobao.org
通过终端查看版本，确认安装成功（cnpm -v）

1.3 安装hexo博客框架

cnpm install -g hexo-cli
通过终端查看版本，确认安装成功（hexo -v）

1.4 在当前目录建立空的文件夹

mkdir blog
可在finder界面查看是否成功创建文件夹

1.5 博客初始化

sudo hexo init
在此可能会遇到git未安装以及git未登录的问题

第二章 博客创建

内容

2.1 启动博客

hexo s
启动成功后，即可在本地端口处打开一个网页接口，在浏览器里可连接查看

2.2 创建博客

hexo n “博客文章的名字”

2.3 进入创建的博客所在的路径

cd source/_posts

2.4 vim 进入修改

vim 博客文章的文字.dm

2.5 按esc，再输入：wq

就能退出vim修改界面

2.6 回到blog路径

2.7 更新博客内容

hexo clean
hexo g
然后可以再次启动hexo s 查看是否修改博客成功

第三章 github上建立远程博客仓库

内容

3.1 新建仓库

在github登录后的初始界面的右上角，点击个人头像左边的“+”号
再点击菜单中的“New repository”新建仓库
仓库命名：autumn-repeat.github.io
这样就建立了一个github上的空仓库

3.2 建立仓库与个人博客的链接

回到终端超级用户命令
进入blog路径
输入：cnpm install –save-deployer-git

3.3 配置_config.yml文件（同样在blog路径下）

vim _config.yml
在文件底部deploy下面输入
type: git
repo: ”将创建好的仓库地址粘贴于此“
branch: master
然后就保存退出（esc-：wq）

3.4 部署到远端服务器

hexo d

3.5 如果后续重新编写博客，再此上传，步骤如下

编写博客：vim
回到blog，清理数据：hexo clean
生成文件：hexo g
部署远端：hexo d

第四章 编辑Hexo-yilia

内容

4.1 配置缺失模块

git clone得到的yilia主题，无法显示文章目录。需要配置一下。

需要注意电脑中是否已经配置了node（npm会在安装node时自动安装）（http://nodejs.cn/download/）

然后在博客根目录执行

1
npm i  hexo-generator-json-content --save

最后在博客根目录里找到_config.yml，在任意位置配置以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

在博客根目录下，根据如下命令查看效果

1
2
hexo g
hexo s

4.2 调整样式，字体

4.3 文章标题和截断

文章标题格式如下

1
2
3
4
5
6
---
title: 搭建个人博客流程
date: 2021-05-15 19:02:12
tags: 博客工具

---

文章截断

1
<!-- more -->

4.4 其余配置

其他链接，头像，背景配置如下

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
# Header

menu:
  主页: /
  随笔: /tags/随笔/

# SubNav
subnav:
  github: "https://github.com/Autumn-repeat"
  weibo: "#"
  rss: "#"
  zhihu: "https://www.zhihu.com/people/autumn-92-7"
  #qq: "#"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  mail: "zzq370381990@163.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: false
# 是否在新窗口打开链接
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: 1
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

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

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png

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

#是否开启分享
share_jia: true

#评论：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: false

# 智能菜单
# 如不需要，将该对应项置为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: 新的发现！<br> 新的快乐！

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

新的发现！<br /> 新的快乐！