搭建一个Hexo+GitHub的博客

S1Lu

已于 2022-01-29 17:12:21 修改

阅读量283

点赞数 1

分类专栏：网安学习文章标签： github

于 2021-01-30 14:39:23 首次发布

本文链接：https://blog.csdn.net/qq_51644623/article/details/113404732

版权

网安学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

搭建一个Hexo+GitHub的博客步骤

一：搭建前的环境准备

（1）Node.js 的安装和准备

在浏览器上搜索node node的官网
点进去下载
下载任意一个
按步骤安装
![安装](https://img-blog.csdnimg.cn/20210130140104847.png

详细安装过程

（2）git的安装和准备

浏览器搜索git

点进去后，点击如图：

安装

Git详细安装

（3）gitHub账户的配置

先注册GitHub账号：地址
登陆之后，点击页面右上角的加号，选择New repository：

进入代码库创建页面：
在Repository name下填写你的昵称.github.io，如图所示：

注意：比如我的github名称是yuanwangmumu，这里你就填 yuanwangmumu.github.io。就是填成你的昵称.github.io这种格式

二：环境配置及其相关问题解决

桌面右键点开 git bash here
进入命令框

node -v

npm -v

git --version

这样的
如果没出现如上的可以查看解决方案
 解决方案
然后输入

 npm install hexo-cli -g

hexo的下载
出现+hexo-cli@4.2.0代表成功了（注意有的版本会不一样）

三：将hexo与GitHub连接

配置git个人信息，生产新的ssh密钥

git config --global user.email "you@example.com"

//注册github用的邮箱

git config --global user.name "yourname"

//github用户名

打开Git Bash（桌面上鼠标右击 Git Bash here）输入

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。
然后在任意盘新建一个空的文件夹，在此文件夹，右键git bash here
输入hexo init开始初始化

hexo init

初始化

稍等一下，当出现start bloging with hexo代表初始化成功
然后安装依赖性文件，输入npm install

npm install

npm install hexo-deployer-git --save

在这里插入图片描述

安装成功后
安装部署插件，输入

npm install hexo-deployer-git --save

本地的文件中有一个_config.yml打开在最后那里修改为

deploy:
  type: 'git'
  repository: git@github.com:yuanwangmumu/yuanwangmumu.github.io.git  ##这个填上Github中的仓库的ssh地址
  branch: master

hexo generate

hexo g -d

然后输入

hexo s

就会在本地给你开启locahost:4000的端口

hexo 4000

4000
如果打不开可能窗口被占，点击查看如何解决
打开后的样子
在这里插入图片描述

然后开始设置让这个本地端口让别人访问，用到github账号，在部署到远端访问前，要下载一个deployer的插件，
输入npm install hexo-deployer-git --save

npm install hexo-deployer-git --save

在这里插入图片描述

到原来的新建文件夹里找到_config.yml文件
在这里插入图片描述

最后有个deploy，把type类型写成git，除了type，还要加上repo和branch，repo就是在GitHub上的网址，branch填主分支msater，注意这两个在填写时前边必须有空格，修改好后按ctrl+s保存

返回命令行

hexo clean

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

依次输入

 npm install hexo-cli -g

hexo的下载
出现+hexo-cli@4.2.0代表成功了（注意有的版本会不一样）

hexo init

npm install

然后将拷贝的文件让新生成的文件覆盖
安装成功后
安装部署插件，输入

npm install hexo-deployer-git --save

配置git个人信息，生产新的ssh密钥

git config --global user.email "you@example.com"

//注册github用的邮箱

git config --global user.name "yourname"

//github用户名

打开Git Bash（桌面上鼠标右击 Git Bash here）输入

ssh‐keygen ‐t rsa ‐C "your_email@example.com"

hexo g -d

在输入

hexo s

查看是否成功。

六：目录设置及调整

修改next主题的ejs文件
我们首先要编辑文章显示页面的模板，也就是themes/next/layout/_partial/article.ejs文件。为了将目录生成在正文之前，我们首先在这个文件中找到<%- post.content %>，并在这一行之前加入如下代码：

<!-- Table of Contents -->
<% if (!index && post.toc){ %>
  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <%- toc(post.content) %>
  </div>
<% } %>

这段代码的含义清晰明了，if语句中有两个条件，!index是为了不在首页的文章摘要中生成目录，post.toc确保了只在显式地标记了toc: true的文章中生成目录。若这两个条件满足，则创建一个目录的

。

修改完这个文件之后，找一篇包含了多个子标题的文章，并在文章开头的front-matter中添加一句toc: true，在浏览器中访问这篇文章，应该可以看到文章的开头处已经有了带链接的目录。但是这样的目录实在太难看，我们还需要添加相应的CSS来将其指定为我们想要的样式。
为目录编写CSS文件
要指定目录的样式，我们要修改的文件是themes/next/source/css/_partial/article.styl。在文件的最后，添加如下代码：

/*toc*/
.toc-article
  background #eee
  border 1px solid #bbb
  border-radius 10px
  margin 1.5em 0 0.3em 1.5em
  padding 1.2em 1em 0 1em
  max-width 28%
.toc-title
  font-size 120%
#toc
  line-height 1em
  font-size 0.9em
  float right
  .toc
    padding 0
    margin 1em
    line-height 1.8em
    li
      list-style-type none
  .toc-child 
    margin-left 1em

第一段的toc-article指定了目录整个

的背景色、边框色、倒角半径、各种间距以及最大的宽度。注意这里最好指定目录的最大宽度，我将其设为了28%，也就是文章正文那个框的宽度的28%，也可以设为一个固定的长度，比如在笔记本电脑上16em就是个不错的宽度，但为了能适配各种不同尺寸的屏幕，最好还是设置为百分比。如果不指定最大宽度，遇到比较长的标题时，生成的目录会非常难看。这个最大宽度的设置是我在网上其他添加目录的方法中没有见到的。
第二段的toc-title指的就是“文章目录”那四个字，这四个字要比其他字大一些，将其字号设为其他字的120%。
第三段的#toc.toc指定了目录列表的一些细节，将font-size设为0.9em会让目录的字比文章的字稍小一些。最后的.toc-child指定了二级目录的缩进量。
再次生成页面，应该已经可以显示比较美观的目录了。
六选自大佬链接
经另一个大佬指导最后改成这个

/*toc*/
.toc-article
  background #eee
  border 1px solid #bbb
  border-radius 10px
  margin 1.5em 0 0.3em 1.5em
  padding 1.2em 1em 0 1em
  max-width 28%
.toc-title
  font-size 120%
#toc
  line-height 1em
  font-size 0.9em
  position fixed
  right 10px
  .toc
    padding 0
    margin 1em
    line-height 1.8em
    li
      list-style-type none
  .toc-child 
    margin-left 1em