本网站搭建教程(基于hexo+蝴蝶主题+github page)

本教程将会从零开始，教你一步步搭建自己风格的博客网站

从零开始！环境搭建

操作系统我用的是VMware虚拟机Ubuntu 22.10，你也可以用docker创建容器

首先安装一下 Hexo 需要的 node.js 和软件管理器 npm

在Ubuntu上打开一个终端

1
2
sudo apt-get install nodejs
sudo apt-get install npm

接下来安装Hexo，Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

1
npm install -g hexo-cli

部署

创建本地网站页面

找一个方便的位置创建网站根目录[myblog]

1
2
3
# 进入这个myblog文件夹
cd myblog
npm install

生成一个hexo文件夹

1
2
3
4
hexo g
hexo server
# Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop
# 默认4000端口 如果想要改端口 使用hexo server -p 5000

访问 http://localhost:4000/ 即可看到生成的示例静态网站

把网站部署到github page

首先需要一个 github 账号，我的账号是 https://github.com/zoulicheng ，以我的为例，创建新 repository，

记住仓库名要叫 账户名.github.io，这里报错是因为我已经有了

image-20221113115828455

接着在 github右上角头像 - Settings - Developer settings - Personal access tokens (classic) 生成 token（远程git登录github必须）image-20221113122604177

生成后的 token 最好第一时间保存到私密的地方，后面不能再从github上找到了

修改根目录下的_config.yml的 deploy选项

1
2
3
4
5
6
7
8
9
# 修改_config.yml
deploy:
  type: git
  repo: https://GITHUB_TOKEN@github.com/zoulicheng/zoulicheng.github.io.git
  branch: master

# 配好后用下列命令检查
git config --global user.name "yourname"
git config --global user.email "youremail"

下载 hexo 官方deploy工具进行部署

1
2
3
4
5
npm install hexo-deployer-git --save
hexo clean
hexo generate
hexo deploy
# 成功，访问 youraccount.github.io即可看到博客

如果能在https://youraccount.github.io/访问，则代表部署成功！

至此，网站框架已经打好，已经可以写文章上去了，下一步是应用主题进行美化

安装butterfly主题

学业繁忙，还没更新~

使用阿里云自定义域名

学业繁忙，还没更新~