如何用hexo搭建博客

蒟蒻渣文笔
试着写一下我是如何在windows上用hexo搭建起自己的博客的。。。

建议搭配 hexo杂谈 一起阅读。

开始搭建

搭建必需

一个github账号
git for windows 直接进官网下最新版就行
node.js 同上

这两个软件都不算大,所以下载起来也不算慢。

github

在github上新建一个名为你的用户名.github.io的库。比如我的用户名为jensentsts,那么我就新建了jensentsts.github.io。
我们新建的库名必须是你的用户名.github.io,其它的均不会被github识别并建立github page

SSH keys

SSH是一种网络协议,用于计算机之间的加密登录,比直接用用户名、密码登录要安全。
什么,你说手机验证码登录可能更安全?但我们这里是计算机通讯用的登录而不是普通的用户登录啊……
言归正传。
在此之前我没有配置SSH key,所以我用如下指令生成SSH key文件

1
$ ssh-keygen -t rsa -C "邮件地址"

我一开始把C给小写了,这就导致一开始没能成功生成SSH key文件……
然后再C盘打开C:\用户\用户名\.ssh0你会找到一个名为id_rsa.pub0的文件。用记事本(我用的是notepad++)打开它,然后复制里面的内容,在github的主页上,进入Settings里面的SSH and GPG keys,点New SSH key。随便取一个title,把那一堆内容复制进key里。
然后我们要测试一下SSH是否配置成功。
1
$ ssh -T git@github.com

提示我们Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到

Hi jensentsts! You’ve successfully authenticated, but GitHub does not provide shell access.

说明我们的SSH keys配置成功。然后:

1
2
$ git confg --global user.name "你的github用户名"
$ git confg --global user.email "你的github注册邮箱"

hexo time

初始化

安好了git,再开始菜单里找到git bash并启动,然后就是一通npm……
npm是一个很常用的指令&工具,随node.js的安装进入你的电脑.
下面我们要用npm把hexo安进git里

1
$ npm install -g hexo

在电脑里找一个存储你的博客相关内容的文件夹,比如F:\blog,首先cd到这个目录去
1
$ cd F:/blog

然后初始化hexo
1
$ hexo init

在此之后,如果你打开F:\blog你就会发现hexo已经为你创建了一堆博客文件。

hexo创建了什么东西?

  • public:存储渲染好的博客网页文件,比如html、css、js和包括图片在内的文件。
  • source:资源文件夹,存储了各页面下的markdwown文件。里面的_post就是博客文章0的文件夹.
  • scaffolds:模板文件夹,没啥用但是得留着。
  • themes:存储了主题,默认主题为landscape。
  • node_modules:存储了博客的各种插件,以后我们添加插件时可能会常常访问这个文件夹
  • _config.yml:存储博客相关的参数。
  • package.json:主要记录你的博客安装的各种东西的版本等信息,不用管

没有什么特别需求的话,把你用markdown写好的文章丢进./source/_post/里面就好。关于创建别的页面……请您去看别的博客把,我懒得写
我们可以用如下命令创建一个空白的markdown文件:

1
$ hexo n "文章名称"

当然,hexo n是一个简化指令,完整指令是这个:
1
$ hexo new "文章名称"

完成后我们可以在./source/_post/下找到文章名称.md。聪明的你一定明白它是什么。

配置_config.yml

首先用记事本或者是notepad++之类的纯文本编辑器打开./_config.ynl

修改网站名和博客主名

./config.yml里找到如下内容并修改

1
2
3
title: 网站名
# 其它的一些东西
author: 博客主名

修改主题

上指令:

1
$ git clone 主题github库的链接 themes/主题名称

比如我用的就是hexo官网上的Lite主题,那么我的指令便是:
1
$ git clone https://github.com/HeskeyBaozi/hexo-theme-lite/ themes/lite/

然后修改./_config.yml中的theme: landscape改为theme: 主题名称,比如我的theme: lite

修改语言

有些博客分各种语言版本,所以你需要修改语言设置

1
language: en # en是英语,或者改成是别的

最后一步

别忘了,我们写的都是markdown文件,然而我们在浏览器中看到的都是解析好的html文件。
所以,我们还需要生成博客网页文件。

1
hexo g

这里的ggenerate的简化。这时候我们会发现,在./public/下的index.html并不能打开,这是为什么呢?
我不知道我们要启动hexo的服务,才能在浏览器上,通过访问http://localhost:4000/#/,直接查看我们渲染好的博客。
1
hexo s

同理,sserver的简化。

上传!

保留readme.md等文件

把你的readme.md放到./source/下?这样做确实可以。
但由于hexo每次生成时都会把所有.md文件转化为html,你还要手动删掉./public/下的readme.html,所以我的做法是直接把readme.md放到根目录下,每次提交时把readme.md丢进去。
当然,作为懒人,我现在不带readme.md,等哪天变勤快了,我再加上

上传到github

先安装一个插件

1
$ npm install hexo-deployer-git --save

配置_config.yml中有关deploy的部分:
1
2
3
4
deploy:
type: git
repository: git@github.com:jensentsts/jensentsts.github.io.git
branch: main

有的教程因为使用了hexo2.x,所以写法和上面不同。请按照如上格式配置,记得把jensentsts替换成你的用户名。
分支应为main,GitHub在更新之后不再是master了
然后,发射!(ddeploy的简化)
1
$ hexo d

参考

文献

使用hexo+github搭建免费个人博客详细教程
简单认识Hexo的目录结构

好用的markdown编辑器

洛谷云剪切板
没在洛谷博客上发主要是因为这样才能收获“自己动手,丰衣足食”的满足感

作者

槎游星海

发布于

2021-07-19

更新于

2023-01-04

许可协议

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×