github+hexo+butterfly搭建属于自己的博客

前言:这是一篇萌新级的文章,作者也是一个萌新,由于网上完整教程似乎较少,故出此文章
阅读此文,您需要熟练使用复制粘贴,建议一步一步来,否则可能出错
作者亦不能保证这篇文章完全正确
最终效果就是这一个网站了

0x0001 前期准备

环境准备

建议使用linux环境,手机端可以使用termux,windows上用wsl
编辑器建议使用nano
安装wget
有一个魔法工具

账号设置

申请一个github账号
去settings--developer-settings--token创建一个令牌,打勾时全选 上就行,然后复制令牌
创建一个存储库,命名为:你的Github名字.github.io

安装nodejs

这不是重点,就不多说了(逃...
前往nodejs.org下载适用于你的系统的安装包,或者直 接用系统里的apt,pacman等包管理器安装

安装git

系统里安装上git和github-cli
执行:

gh auth login

敲两下回车,粘贴进去你的token然后回车
然后执行:

git config --global user.email "你的电子邮件地址"
git config --global user.name "你的github用户名"

0x0002 部署一个hexo博客

cd ~
mkdir hexo
npm install -g hexo
cd hexo
hexo init
npm install hexo-theme-butterfly hexo-renderer-pug hexo-renderer-stylus cheerio hexo-deployer-git  --save

0x0003 编辑网站配置文件

cd ~/hexo
nano _config.yml

按照您的需要更改以下内容:

title: 网站标题
subtitle: 网站子标题
description: 网站描述
keywords:
    - 关键字
    - 关键字
author: 你的名字
language: zh-CN
url: 你的网站地址
theme: butterfly
deploy:
  type: git
  repository: 你的github仓库地址,如https://github.com/xxxx/xxxx.github.io

0x0004 配置主题

rm ~/hexo/node_modules/hexo-theme-butterfly/_config.yml
cd ~/hexo/node_modules/hexo-theme-butterfly/
wget https://github.com/Moe-hacker/moe-hacker.github.io/raw/master/resources/_config.yml

然后:

nano ~/hexo/node_modules/hexo-theme-butterfly/_config.yml

将配置文件中的Moe-hacker替换成你的github名字
将subtitle:中的sub里的内容替换为你想要的句子
准备一张背景图片,放置在hexo/public,命名为background.png
准备一张你的头像,放置在hexo/public,命名为face.jpg

0x0005 配置链接

hexo new page link
hexo new page tags
hexo new page categories
hexo new page about

然后:

友链:

nano ~/hexo/source/link/index.md

加入以下内容到两个横线中间:

type: "link"

标签页:

nano ~/hexo/source/tags/index.md

加入以下内容到两个横线中间:

type: "tags"

分类页:

nano ~/hexo/source/categories/index.md

加入以下内容到两个横线中间:

type: "categories"

关于页:

nano ~/hexo/source/about/index.md

加入以下内容到两个横线中间:

type: "about"

横线下面是你的网站介绍,出现在关于页面里

配置友链:

mkdir -p ~/hexo/source/_data
nano ~/hexo/source/_data/link.yml

示例:

- class_name: 友情链接
  class_desc: 那些人,那些事
  link_list:
    - name: Moe-hacker
      link: https://moe-hacker.github.io
      avatar: /face.jpg
      descr: 萌系黑客的博客

0x0006 效果预览

cd ~/hexo
hexo g
hexo s

浏览器访问http://localhost:4000/ ,可以看到我们的博客已经建好 了

0x0007 开始写博客

rm /hexo/source/_posts/hello-world.md
hexo new 你的第一篇博客
nano /hexo/source/_posts/你的第一篇博客.md

注:如何添加封面
在你的md文件中的两个横杠中添加:

top_img: 头图链接
cover: 封面链接

如何添加标签:
在你的md文件中的两个横杠中添加:

tags:
    - 标签
    - 标签

0x0008 markdown语法学习

内容过多了,自己百度去吧(咕咕咕...

0x0009 博客部署

cd ~/hexo
hexo g
hexo d

过两分钟,访问你的站点,可以看到博客已经建好了

上一篇:JAVA集成JPush


下一篇:pyCharm中添加方法注释(Docstring format & Live Templates)