前言

  首先非常感谢羊哥的教程,跟着一步步操作,非常快速地搭建好了个人博客。这里抛出两个链接:

  b站教学视频:https://www.bilibili.com/video/BV1Yb411a7ty

  羊哥的个人博客:https://www.codesheep.cn/

  上个学期的Python课设就写了一个基于Flask框架的博客管理系统,虽然用起来很方便,但是写起来还是有点繁琐的。框架的学习还是有一些成本在内的,而且前端如果没两把刷子那真的是不能看😂。假期是有打算继续优化下那个项目,“稍微”改一下部署到服务器上去(前端的静态模板我都找好了,这里再安利一下杨青青的个人博客:https://www.yangqq.com/ 里面的模板还是非常好看的,静态和动态的模板都有~~)

  但是奈何自己太辣鸡,这玩意儿倒不是说不想碰了,就是感觉好麻烦,一个功能实现太耗时(这个项目大部分时间都花在了前端上,出bug最多的地方也在前端)。但是用起来确实方便,不像静态博客,目前更新一次的操作步骤比起项目来说还是繁琐了一些。综合考虑了一下还是选择了静态博客,用Hexo搭建,在前端框架基础之上DIY,还是蛮有趣的。


搭建博客

前期准备

  1. 安装Node.js

    官网链接:https://nodejs.org/en/

  2. 为了解决速度慢的问题。建议给Node.js换一个镜像源,这里根据羊哥的教程更换了淘宝的镜像源,代码如下:

1
npm install -g npm --registry=https://registry.npm.taobao.org
  1. 安装Hexo

    官网链接:https://hexo.io/

    直接在首页复制代码,粘贴运行就好:

1
cnpm install -g hexo-cli

快速搭建

  1. 初始化

    在本地创建一个文件夹,作为博客部署的空间。(注:以后所有的操作都基于此文件夹,如果出现了什么问题无法解决,删掉重来就好)在此文件夹内初始化hexo:

1
hexo init

接下来就会在此目录下自动生成一些文件,初始化完成

  1. 启动本地服务
1
hexo s

通过本地默认的4000端口访问:http://localhost:4000

  1. 尝试写第一篇博文

    语法:hexo n “文章名称”

1
hexo n "第一篇博客文章"

然后会发现在sourse/_posts目录下,生成一个.md文件,在此就可以编写文章了。

  1. 清理缓存
1
hexo clean
  1. 生成静态文件
1
hexo g

这就是最基本的操作流程啦~~~~


部署到github/gitee

部署到github

  1. 到github去新建仓库

    注意命名格式:账号名.github.io(例:CNhuazhu.github.io

  2. 安装git部署的插件

1
cnpm install --save hexo-deployer-git
  1. 设置_config.yml文件

    在博客目录下找到_config.yml文件,最底部有一个# Deployment模块,在此设置:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/CNhuazhu/CNhuazhu.github.io.git
branch: master
  1. 部署到远端
1
hexo d

注:访问可能要过一段时间才会生效;账户中含有大写字母也没有关系,地址栏输入的时候同一替换为小写就可以访问

部署到gitee

前四步和github的方法一样,点击此处跳转到第五步。

  1. 到gitee去新建仓库

    注意:这里同github不同,仓库名可以随便,不必使用自己的账号名

  2. 安装git部署的插件

1
cnpm install --save hexo-deployer-git
  1. 设置_config.yml文件
    在博客目录下找到_config.yml文件,最底部有一个# Deployment模块,在此设置:
1
2
3
4
5
6
   # Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://gitee.com/CNhuazhu/cnhuazhu.git
branch: master
  1. 部署到远端
1
hexo d
  1. 开启 Gitee Pages 静态网页托管服务

    进入到仓库中,选择服务下拉框中的Gitee Pages选项,进入后点击部署。使用提供的网址即可访问博客:http://cnhuazhu.gitee.io

    注:每次重新部署代码到gitee时,都需要点击下方的更新按钮重启page服务


更换主题

hexo提供多种主题,直接抛链接:

hexo主题官网:https://hexo.io/themes/

  1. 下载主题

    可以直接输入命令进行下载,格式:git clone 主题地址.git themes/目录,这里以下载yilia主题为例:

1
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

然后在themes目录下就会出现名为yilia的主题文件夹

  1. 修改_config.yml文件

    找到# Extensions模块下的theme标签(默认为landscape),将其替换为下载好的主题名称yilia

1
theme: yilia

然后再重新清理缓存、部署、启动本地服务、推到远端,就可以啦~~~~


总结

按照教程来操作,没什么难度。


*“一切都是那么的优雅~~~~”*