新新补充：目录设置。
新补充：电脑更换系统或更换电脑博客的重新部署，由于电脑原因我重现下了系统。
一：搭建前的环境准备
（1）Node.js 的安装和准备
在浏览器上搜索node
点进去下载
按步骤安装
（2）git的安装和准备
浏览器搜索git
点进去后，点击如图：
安装
Git详细安装
（3）gitHub账户的配置
先注册GitHub账号：地址
登陆之后，点击页面右上角的加号，选择New repository：
进入代码库创建页面：
在Repository name下填写 你的昵称.github.io，如图所示：
注意：比如我的github名称是yuanwangmumu，这里你就填 yuanwangmumu.github.io。就是填成你的昵称.github.io这种格式
二：环境配置及其相关问题解决
桌面右键点开 git bash here
进入命令框
1 | node -v |
1 | npm -v |
1 | git --version |
1 | npm install hexo-cli -g |
出现+hexo-cli@4.2.0代表成功了（注意有的版本会不一样）
三：将hexo与GitHub连接
然后在任意盘新建一个 空的 文件夹，在此文件夹，右键git bash here
输入hexo init开始初始化
1 | hexo init |
稍等一下，当出现start bloging with hexo代表初始化成功
然后安装依赖性文件，输入npm install
1 | nom install |
安装成功后
安装部署插件，输入
1 | npm install hexo-deployer-git --save |
配置git个人信息，生产新的ssh密钥
1 | git config --global user.email "you@example.com" |
//注册github用的邮箱
1 | git config --global user.name "yourname" |
//github用户名
打开Git Bash（桌面上鼠标右击 Git Bash here）输入
1 | ssh‐keygen ‐t rsa ‐C "your_email@example.com" |
然后一直点回车，最后完成后会在用户主目录下（C:\Users\用户名）生成.ssh目录，里面有id_rsa.pub文件。id_rsa_pub是公钥，复制其内容然后登陆github，打开seetings ——>SSH and GPG keys ，点击new SSH key，填上任意title，在key文本框里粘贴刚才复制的内容，点击Add SSH Key。
1 | hexo g -d |
然后输入
1 | hexo s |
就会在本地给你开启locahost:4000的端口
1 | hexo 4000 |
如果打不开可能窗口被占，点击查看如何解决
打开后的样子
然后开始设置让这个本地端口让别人访问，用到github账号，在部署到远端访问前，要下载一个deployer的插件，
输入npm install hexo-deployer-git –save
1 | npm install hexo-deployer-git --save |
到原来的新建文件夹里找到_config.yml文件
最后有个deploy，把type类型写成git，除了type，还要加上repo和branch，repo就是在GitHub上的网址，branch填主分支msater，注意这两个在填写时前边必须有空格，修改好后按ctrl+s保存
返回命令行
1 | hexo clean |
1 | hexo g -d |
输入hexo g -d开始推送到GitHub
四：博客主题更换
五：电脑更换系统或更换电脑博客的重新部署
一：要拷贝下来的重要内容
1 _config.yml:站点配置文件
2 theme:主题文件
3 source：这个肯定是要拷贝，里面有写的博客文件
下边的可以不用：
4 scaffolds：文章模板
5 package.json：说明使用哪些包
6 .gitignore：限定在提交的时候哪些文件可以忽略
二：开始部署
先下载“Git”，和“node.js”
在你拷贝的文件夹里新建一个文件夹，在文件夹里打开git bash here
依次输入
1 | npm install hexo-cli -g |
出现+hexo-cli@4.2.0代表成功了（注意有的版本会不一样）
1 | hexo init |
1 | npm install |
然后将拷贝的文件让新生成的文件覆盖
安装成功后
安装部署插件，输入
1 | npm install hexo-deployer-git --save |
配置git个人信息，生产新的ssh密钥
1 | git config --global user.email "you@example.com" |
//注册github用的邮箱
1 | git config --global user.name "yourname" |
//github用户名
打开Git Bash（桌面上鼠标右击 Git Bash here）输入
1 | ssh‐keygen ‐t rsa ‐C "your_email@example.com" |
然后一直点回车，最后完成后会在用户主目录下（C:\Users\用户名）生成.ssh目录，里面有id_rsa.pub文件。id_rsa_pub是公钥，复制其内容然后登陆github，打开seetings ——>SSH and GPG keys ，点击new SSH key，填上任意title，在key文本框里粘贴刚才复制的内容，点击Add SSH Key。
1 | hexo g -d |
在输入
1 | hexo s |
查看是否成功。
六：目录设置及调整
修改next主题的ejs文件
我们首先要编辑文章显示页面的模板，也就是themes/next/layout/_partial/article.ejs文件。为了将目录生成在正文之前，我们首先在这个文件中找到<%- post.content %>，并在这一行之前加入如下代码：
1 | <!-- Table of Contents --> |
这段代码的含义清晰明了，if语句中有两个条件，!index是为了不在首页的文章摘要中生成目录，post.toc确保了只在显式地标记了toc: true的文章中生成目录。若这两个条件满足，则创建一个目录的
修改完这个文件之后，找一篇包含了多个子标题的文章，并在文章开头的front-matter中添加一句toc: true，在浏览器中访问这篇文章，应该可以看到文章的开头处已经有了带链接的目录。但是这样的目录实在太难看，我们还需要添加相应的CSS来将其指定为我们想要的样式。
为目录编写CSS文件
要指定目录的样式，我们要修改的文件是themes/next/source/css/_partial/article.styl。在文件的最后，添加如下代码：
1 | /*toc*/ |
第一段的toc-article指定了目录整个
第二段的toc-title指的就是“文章目录”那四个字，这四个字要比其他字大一些，将其字号设为其他字的120%。
第三段的#toc.toc指定了目录列表的一些细节，将font-size设为0.9em会让目录的字比文章的字稍小一些。最后的.toc-child指定了二级目录的缩进量。
再次生成页面，应该已经可以显示比较美观的目录了。
六选自大佬链接
经另一个大佬指导最后改成这个
1 | /*toc*/ |
七：这个博客的一些操作
1.用 markdown写文章时插入,文章会自动从插入的位置截断，也就是说在博客中只显示之前的内容，点击阅读全文之后会显示所有内容。
2.标记toc: true的文章中生成目录
3.标记toc: true置顶
- 文章链接: https://s1lu.github.io/post/搭建一个Hexo+GitHub的博客/2021/
- 版权声明: 本网站所有文章除特别声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明出处!
