Hexo+Github搭建个人网站
前言
在下载Hexo之前，明确Hexo的搭建过程：
- 1.安装
Hexo - 2.配置
Hexo主题并配置网站信息 - 3.创建
Github个人仓库并配置hexo关于Github的配置 - 4.发布文章并提交
在安装Hexo之前，要确认好安装好Git和 Node.js。
1.安装Hexo
通过在Git Bush里面输入下列命令你就可以安装Hexo
npm install -g hexo-cli
安装完成后输入hexo -v验证是否安装成功。
你可以输入hexo init 文件名进行初始化，例如：我的博客文件都放在MyBlog这个文件夹下面的。
当然也可以事先创建好，然后在该文件目录下输入hexo init。
新建完成后，通过指令cd MyBlog进入指定文件,目录下有
- node_modules: 依赖包
- public： 存放生成的页面
- scaffolds： 生成文章的一些模板
- source： 用来存放你的文章
- themes： 主题文件
- _config.yml: 博客的配置文件
输入hexo g生成静态网页，然后输入hexo server(或者简写hexo s)打开本地服务器
这时候网页已经部署完成，在浏览器访问http://localhost:4000，即可以打开新部署的网页。
按Ctrl + C 可以停止本地服务器。
每次本地修改完，就输入下面三条指令：
hexo clean
hexo generate
hexo deploy
hexo clean清除了你之前生成的东西，也可以不加。 hexo generate生成静态文章，可以用 hexo g缩写 ，hexo server部署文章，可以用hexo s缩写。
2.配置Hexo主题以及网站信息
（1）Hexo根目录下的_config.yml配置文件
如下面的列子修改
①网站
# Site
title: '草莓酸奶的后花园' #网站的标题
subtitle: '记录平时点滴' #网站副标题
description: '码农的生活' #网站描述
keywords:'后端' #关键词
author: '草莓酸奶' #网站作者
language: zh-CN #网站的语言
timezone: 'Asia/Shanghai' #时区
②扩展
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia #默认landscape，我这里用的主题是`Yilia`，后面会用的到。
(2)下载主题
我采用的是Yilia主题，作者仓库地址，所有的配置都在_config.yml中完成，更多的专注在内容上。
在Git Bash里面输入下列代码，下载文件到本地。
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
把文件名hexo-theme-yilia重命名为前面在扩展里面写的yilia，然后把文件放在themes里面。
（3）修改主题目录下的_config.yml
这是作者的配置文件地址
# Header
menu:
主页: /
随笔: /tags/随笔/
# SubNav
subnav:
#github: "#"
#weibo: "#"
#rss: "#"
#zhihu: "#"
#qq: "#"
#weixin: "#"
#jianshu: "#"
#douban: "#"
#segmentfault: "#"
#bilibili: "#"
#acfun: "#"
#mail: "#"
#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: true
# 打赏
# 打赏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: https://avatars.githubusercontent.com/u/108323824?v=4
#是否开启分享
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: LKFhnust18 #你的 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/
aboutme: XXX<br>毕业于xxx<br><br>热爱大海与冷笑话，<br/>目前是一枚前端<br/><br/>胆小认生，不易相处，<br>
大概是这样子
这里在打开所有文章的时候，提示缺少模块。
安装命令如下：
npm i hexo-generator-json-content --save #在博客根目录（注意不是yilia根目录）执行以下命令
安装完成后，在根目录下_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
再打开效果图如下:
3.创建Github个人仓库并配置hexo关于Github的配置
新建仓库时，仓库名称要和你的用户名相同，将来部署到GitHub Page的时候才会被识别，也就是http://username.github.io/username。
第一次使用git后需要将用户名和邮箱进行初始化，在git bash里面输入下面命令
git config --global user.name "yourname"
git config --global user.email "youremail"
用下列两条命令查看本地的Git仓库的用户名和邮箱。
git config user.name
git config user.email
在Git Bash里面执行ssh-keygen -t rsa，填写你设置的仓库的邮件地址就行，就会生成公钥到windows用户目录下的.ssh文件里面
赋值公钥里面的内容，然后进入 GitHub，个人账户设置 — SSH公钥 — 新增密钥，然后将刚才生成文件的内容粘贴到此处。
在git bash输入ssh -T [email protected]，如果如下图所示，出现你的用户名，那就成功了。
配置Hexo关于GitHub的配置，修改Hexo的根目录的_config.yml。
首先配置网站，在github仓库的GitHub Pages上应该看得到，也就是先前说的http://username.github.io/username
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://username.github.io/username
然后就是部署部分,现在主分支是main，而不是master。
# Deployment
deploy:
type: git
repository:[email protected]:LKFhnust18/LKFhnust18.git
branch: main
4.发布文章并提交
Hexo有三种默认布局：post、page 和 draft，它们分别对应不同的路径，而您自定义的其他布局和post相同，都将储存到source/_posts文件夹。
- 当你每一次使用代码
hexo new XXX.md，它其实默认使用的是post这个布局，也就是在source文件夹下的 _post 里面。而new这个命令其实是：hexo new [layout] <title>只不过这个layout默认是post罢了。 - 如果你想另起一页，那么可以使用
hexo new page newpage，系统会自动给你在source文件夹下创建一个newpage文件夹，以及newpage文件夹中的index。 - draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以
hexo new draft newdraft，这样会在source/_draft中新建一个newdraft.md文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用hexo server --draft，在本地端口中开启服务预览。
如果你的草稿文件写完了，想要发表到post中，hexo publish draft newdraft,就会自动把newdraft.md发送到post中。
这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。
npm install hexo-deployer-git --save
然后
hexo clean
hexo generate
hexo deploy
hexo deploy部署文章，可以用hexo d缩写