创建自己的Hexo Blog

发表于 | 更新于: | 分类于

搭建自己的Hexo博客，不深度的个性化next主题，搭建一个属于自己的小窝。

博客搭建

安装git

Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。Hexo的搭建与要用到工具，并且有了它以后就不用打开控制台啦！

Windows系统进入Git官网点击Download进行下载

廖雪峰老师有Git教程可以供大家学习。

安装node.js

windows系统进入nodejs官网下载node.js，安装完成后在Git中输入以下命令：

1
2
node -v
npm -v

查看node.js与NPM是否安装成功。

NPM是随同Nodejs一起安装的包管理工具，能解决Node.js代码部署上的很多问题，允许用户从NPM服务器下载别人编写的第三方包到本地使用。

安装Hexo

先创建一个文件夹Blog，然后用cd到这个文件夹下，或者在这个文件夹下直接右键git bash打开。输入以下命令：

npm install -g hexo-cli

等待安装完成后，在Git中输入代码hexo -v查看Hexo是否按章成功，也可以检查当前版本。

安装 Hexo 完成后，在Git下执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
hexo init <文件夹>
cd <文件夹>
npm install

你可以将<文件夹>更改成其他名字，你的Hexo将创建在该文件夹下。

输入命令：

1
2
hexo generate // 或者输入hexo g
hexo server // 或者输入hexo s

生成并开启Hexo服务，在浏览器输入 localhost:4000 就可以看到你的博客了。更多的Hexo命令可以去Hexo官方网站查看。

博客配置

Hexo的基本配置

Hexo的基本配置文件都在根目录下Blog\XXX\_config.yml文件中。不要根据官方文档胡乱改动，只改有用的。

打开_config.yml文件，用查找快捷键Ctrl+F查找Site字段找到以下词条：

1
2
3
4
5
6
7
title: <博客的标题>
subtitle: 
description:
keywords:
author: <作者名>
language: zh-Hans // 也有可能是zh-CN，根据主题确定，在确定主题之前可以不用改
timezone: Asia/Shanghai // 中国时区，默认使用您电脑的时区，可以不改

可以根据自己的需要进行更改。（注意:后面应有一个空格）

其他配置文件可以查看官方文档，但是不要根据官方文档胡乱改动，只改有用的。

安装Next主题

Hexo有很多主题，比自带的landscape好看多了。这里推荐Next主题，因为Next十分成熟，可以个性化配置的程度很高，网上也有大把大把的个性化教程。

可以查看Next官方文档自行学习Next的安装与初步设定，上面写的很详细。（如果选用Next主题，基本配置上面的language:字段参数设置成zh-Hans）。

Next个性化设置

Next有很多个性化的设置，下面列举几个我觉着不错的，其中参考了Morrez与Simon96两位前辈，大家可以参考一下，挑几个感兴趣的试一试。

文字大小设置

默认的字有点小，可以自己进行设置，让字大一圈。

在themes/next/source/css/_variables/base.styl中查找Font size字段

1
2
3
4
5
6
7
8
9
10
// Font size
$font-size-base           = 14px  //  改这个
$font-size-small          = $font-size-base - 2px
$font-size-smaller        = $font-size-base - 4px
$font-size-large          = $font-size-base + 2px
$font-size-larger         = $font-size-base + 4px

// Headings font size
$font-size-headings-step    = 2px
$font-size-headings-base    = 26px  //这个是标题大小，如果你觉得不满意，可以改的更大一点

菜单字号设置

默认的字才13px，有点小，可以自己进行设置.

在themes/next/source/css/_common/components/header/menu.styl中修改

1
2
3
4
5
6
7
a {
    display: block;
    font-size: 15px; //  修改这里
    line-height: inherit;
    border-bottom: 1px solid $menu-link-border;
    transition-property: border-color;
    the-transition();

博客字体设置

我觉着黑体挺好的，但是看了reuixi前辈的博客，感觉思源宋体看着更舒服。

具体设置可以参考在他的博文中福利标题下的设置方法，其中 3) external-fonts.swig文件的写入代码如下：

1
<link href="https://fonts.loli.net/css?family=Noto+Serif+SC:400,500,700&display=swap&subset=cyrillic,vietnamese" rel="stylesheet">

Logo字体设置

如果想把Logo字体换成与众不同的话，在 themes/next/source/css/_custom/custom.styl 中添加如下代码：

1
2
3
4
5
6
7
8
@font-face {
     font-family: <字体名>;
     src: url('/fonts/<字体名>.ttf');
}
.site-title {
     font-size: 40px !important; //这里的40px是你的logo大小，觉得大的话可以改小些。
     font-family: '<字体名>' !important;
}

将你需要的字体文件放在在 themes/next/source/fonts 目录下，将<字体名>改成自己下载的字体名，具体的文件可以去字体官网和下载。

博文标题设置

如果想修改博文标题字体大小和粗细，需要在 themes/next/source/css/_custom/custom.styl 中添加如下代码：

1
2
3
4
5
6
.posts-expand .post-title {
    font-size: 28px;
    letter-spacing: 1px;
    font-weight: 700;
    text-align: center;
}

感谢北宸的帮助🎈

在博文中插入本地图片

在你的Hexo目录中打开控制台，安装大佬已经写好的hexo-asset-image插件：

1
npm install https://github.com/7ym0n/hexo-asset-image --save

设置Hexo的配置文件_config.yml里面的post_asset_folder:false这个选项设置为true。顺便更改URL字段中的url: http://frozenwu.github.io， 把它改成自己的网站名字，这样会解决你的网站不显示外链图片的问题。

这样，在你新创建博客的时候，Hexo也会在_posts文件夹下创建一个同名的资源文件夹，你可以把你用的图片放到这个文件夹中。

万事俱备！在Typora菜单栏中格式-图像-设置图片根目录，设置为资源文件夹，这样你的Front-matter就会多处一行

1
typora-root-url: python_note

这个python_note就是我的博文名字啦，也是这篇博文资源文件夹的名字。当你插入图片的时候直接输入你放在资源文件夹中的图片名，像![](形参与实参.svg)这样，就可以在Typora以及你deploy之后的Blog中显示自己的图片了！

正确显示Mathjax公式

参考zhengyujie的博客，不修改的话公式很多会显示异常。

设置置顶标签

参考hwhong的博客，手动设置Hexo的置顶功能。

之后打开themes/next/layout/_macro 目录下的post.swig文件，在<div class="post-meta">标签下，紧跟着标签屁股后面，插入如下代码设置置顶标签：

      {% if post.top %}
            
            置顶
            |
          {% endif %}

去掉图片边上的灰框

参考Neo的博客，去掉碍眼的框框。

打开 themes/next/source/css/_common/components/post 目录下的post-expand.styl文件，将

1
2
3
4
5
6
img {
  box-sizing: border-box;
  margin: 0 auto 25px;
  padding: 3px;
  border: 1px solid $gray-lighter;
}

改为

1
2
3
4
5
6
img {
  box-sizing: border-box;
  margin: 0 auto 25px;
  padding: 3px;
  border: none;
}

设置右上角的Github小猫

将下列代码中的<你的Github主页>更改为自己的Github主页，并将该段代码粘贴在hemes/next/layout/_layout.swig文件中<div class="headband"></div>的下面。（其他样式&位置可以参考Morrez）

1
<a href="<你的Github主页>" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

新建博客

cd至安装博客文件夹下，执行下列命令来创建一篇新文章或者新的页面。

1
hexo new [layout] <标题> // 可以简写成 hexo n <标题>

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。生成的文章都是Markdown格式。

布局（Layout）

Hexo 有三种默认布局：post、page 和 draft。在创建者三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局 路径
post source/_posts
page source
draft source/_drafts

Front-matter

Front-matter 是文件最上方以 —- 分隔的区域，用于指定个别文件的变量，例如

1
2
3
4
5
6
---
title: Hello World
tags:
   - Hexo
categories: 博客
---

可以设设置如下参数:

参数 描述
layout 布局
title 标题
date 建立日期
updated 更新日期（尽量不写，会自己更新哒）
comments 开启文章的评论功能
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址
mathjax 公式
typora-root-url Typora的文章根目录，设置一下可以让博文本地上传图片

部署至Github

在配置好了你的博客之后，我们可以将博客部署到Github上进行托管，当然也可以自己购买一个属于自己的专属域名。

创建Github个人仓库（repository）

先申请一个Github账户，记住自己的Github用户名。

注册完登录后，在GitHub.com右上角有一个绿色加号，弹出的菜单中看到一个New repository（新建仓库），创建一个和你用户名相同的仓库，后面加.github.io，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是XXX.github.io，其中XXX就是你注册GitHub的用户名。之后点击Create repository确认创建。

生成SSH添加到GitHub（添加过的话可以跳过）

SSH为建立在应用层基础上的安全协议，可以理解为一套密钥。

在Git bash中输入以下命令，这样GitHub才能知道对应账户。

1
2
git config --global user.name "<Github用户名>"
git config --global user.email "<Github邮箱>"

检查一下你有没有录入错误：

1
2
git config user.name
git config user.email

然后输入指令创建SSH

1
ssh-keygen -t rsa -C "<Github邮箱>"

而后在GitHub的setting中，找到SSH keys的设置选项，点击New SSH key，把你的在此电脑/C:/用户/.ssh/中找到id_rsa.pub文件，并把里面的信息复制进去。

在Git bash中输入以下命令，检查一下是否成功：

1
ssh -T git@github.com

部署至Github

这一步，我们就可以将Hexo和GitHub关联起来，也就是将hexo生成的文章部署到GitHub上，打开站点配置文件 Blog\XXX\_config.yml，翻到最后，修改为

1
2
3
4
deploy:
  type: git
  repo: https://github.com/<你的Github用户名>/<你的Github用户名>.github.io.git
  branch: master

这个时候需要先安装deploy-git ，也就是部署的命令，这样你才能用命令部署到GitHub。

1
npm install hexo-deployer-git --save

然后在你博客文件夹下在Git bash中输入以下命令：

1
2
3
hexo clean //  清除缓存
hexo generate
hexo deploy // （或者输入hexo d）部署文章，也就是将文章部署在Github上

deploy时可能要你输入username和password，过一会儿就可以在http://<Github用户名>.github.io这个网站看到你的博客了。

致谢