Alarm's Blog

简易博客，记录学习

0%

部署静态博客hexo网站

发表于 更新于 分类于 阅读次数： 评论： 本文字数： 1.1k 阅读时长 ≈ 1 分钟

引言：

  1. 建立一个博客网站有很多方法，而我了解到了一个静态博客框架hexo，部署方式简单，甚至无需服务器。
  2. 我选择的部署方式为github+Cloudflare，由于我是个新手小白，没有服务器什么的，所以采用这个简单经济的方案。还有，本地为windows系统。

【Hexo官网】

1.安装基础应用git和Node.js

通过官网安装
git官网：https://git-scm.com/downloads/win
Node.js官网（建议LTS版，他们都是这样说的）：https://nodejs.org/zh-cn

2.本地构建hexo框架

2.1构建

安装hexo组件

1
npm install -g hexo-cli

选择合适的文件夹运行cmd

1
2
mkdir hexoblog       #新建文件夹
hexo init hexoblog  #安装hexo本体

hexoblog为项目文件夹名称，可根据自己需求更改
安装依赖

1
2
cd hexoblog  #进入项目文件夹
npm install  #安装依赖

项目文件夹结构如图

1
2
3
4
5
6
7
├── _config.yml
├── package.json
├── scaffolds
├── source
|  ├── _drafts
|  └── _posts
└── themes

hexo的原理是将source文件夹中的页面和文章markdown文件（默认格式）按照指定样式渲染为html文件并保存到public，该文件夹即为输出目录。

2.2 测试

项目根目录运行

1
2
hexo g
hexo server

在https://localhost:4000查看

3.初始化git仓库并推送至github

3.1 本地仓库初始化

项目根目录运行

1
2
3
git init
git add .
git commit -m "Initial commit"

3.2 Github远程仓库

登入Github账户，创建仓库(new repository)，选择私人,其他默认

3.3推送

绑定Github仓库，URL去到仓库界面即可查看。

1
git remote add origin <远程仓库URL>

推送项目至Github仓库

1
git pull origin main

4.利用cloudflare部署

1.登入cloudflare仪表盘，选择workers 和pages -> pages。
2.从Github选择hexo仓库部署
构建命令

1
npx hexo generate

构建输出目录 \public
3.部署完成后访问域名即可，建议绑定自定义域名。

5.后续文章更新

请看新文章