0%

用hexo+Next模板+GithubPage快速建立个人博客

前言

本文章主要介绍hexo博客的搭建,Next模板添加与相关设置
今天又重新捣鼓了一遍hexo博客,升级后发现还是有很多不同,这之间也踩了挺多坑,这边就一并说一下
本文所有命令可以在Windows Terminal中操作,这是微软新的命令行终端,比cmd强大,美观不少,官方商店就可以下载。
所有相关配置在VS Code上更改

正文

hexo博客初搭建

NodeJs安装

hexo中许多拓展都要用npm,后文要用
下载完之后添加到环境变量

正式安装

首先,创建一个文件夹,本文中为Blog,然后cd进去
执行下面命令安装hexo
npm install hexo-cli -g
安装完毕后执行命令
hexo init Blog
npm install
这时你会在文件夹中看到新增许多文件,这样就安装完成了,然后执行
hexo s
这时在命令行中会给出一段链接,进入网址即可查看网站效果,现在你已完成大部分准备工作了
下面安装Next
clone https://github.com/theme-next/hexo-theme-next.git

主题切换至Next

用VS Code打开Blog文件,在根目录下打开_config.yml文件,在底端可找到theme键,配置如下
theme: next
然后进入
~/Blog/theme/next/_config.yml
Next有4个分支主题,VS Code中按Ctrl+F搜索scheme,可发现有4个主题,这里可选择自己喜欢的
这里可一一预览进行选择

主题配置

  • 网页总设置
    进入网站配置,在开头分别填网站标题,作者,语言(zh-CN)
  • 头像
    将头像图片放在
    ~/Blog/theme/next/source/images(此为图片路径
    然后在主题配置中更改avatar,并将图片路径填上
  • 网站标签页图片
    在主题配置中找到favicon配置前两个就行(samll和medium)
    这些是比较基础的配置,后续我会单独写一篇文章说说几个常用配置

网站关联Github

网站关联github后可不用服务器,仅需域名即可(需花钱注册)
首先在github上建个库,名字一定要遵循
你的Github用户名 + .github.io
进入库设置,里面找到custom domain改为你的域名
域名解析到你的你的库名(上面)
然后回到网站配置,末尾改为:

1
2
3
4
deploy:
type: 'git'
repository: git@github.com:username/username.github.io.git //username是github用户名
branch: master

进入~/Blog/source,创建CNAME文件,无后缀,里面填域名
回到Blog文件夹下,分别执行:

1
2
3
hexo clean //清理缓存
hexo g //生成静态页面
hexo d //网站push到github上

然后就大功告成了

最后

这是我第一次用md写博客,排版可能有问题
文中还有一些没说到,下个文章我会说完
文中不足或错误之处,多请各大佬指正