前言
由于在技术社区中发的文章主题、自定义布局等页面效果受限于社区平台提供的规则和主题，因此想着自己搭一个博客同步发表到社区中的文章，对于前端选手来讲，没事儿还能自己魔改一下，研究技术的同时，顺便还能自嗨一下，这里选择使用 Hexo 和 GitHub 来搭建自己的博客，主要原因如下
Hexo 使用
Hexo 安装
使用 npm 或 yarn 全局安装
css
npm i hexo-cli -g如果通过命令安装出现如下错误 permission denied，如下效果
bash
$ npm i hexo-cli -g
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xxxx/.npm/_logs/2023-10-29T05_31_24_377Z-debug.log这种情况一般是权限不足导致的，使用管理员权限执行对应命令
Mac 或 Linux
使用管理员权限安装命令，命令前面添加 sudo 即可
bash
sudo npm i hexo-cli -gWindows
使用管理员权限，打开命令行提示符，执行如下命令
bash
npm i hexo-cli -g初始化博客文件目录
bash
hexo init blog进入blog目录，安装依赖
bash
cd blog
npm installhexo-cli 自动创建了相关文件和目录，这时候的 blog 项目目录为如下效果
运行 Hexo 服务，本地预览
bash
hexo server
访问 http://localhost:4000/ 地址效果如下，这是 hexo 默认的主题效果，一个博客的基本雏形已经有了
Github Pages 部署
创建仓库
创建一个 GitHub用户名 的仓库，提交本地生成 hexo 的仓库代码
设置 GitHub Pages
Settings > Pages > Source 选择 GitHub Actions ， 然后点击 create your own
创建 pages.yml 部署流程文件，直接把 官方的配置 复制过来
修改一下对应的 node 版本，把下面位置的 node 版本改成本地的 node 对应版本
yml
- name: Use Node.js 16.x注意！
这里的版本如果和本地不对应的话，在GitHub上部署后可能预览效果和本地会不一致
添加 pages.yml 文件成功后，在 Actions 选项中会有对应的工作流运行起来
注意!
如果项目能访问，但是 css, jquery 等文件 404，导致页面样式不生效，如下效果，查看 _config.yml 文件中 URL 的配置，看是否是自己的 github 项目仓库链接
修改 url 参数为自己的仓库地址
bash
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://gywgithub.github.io/gywgithub修改后再次部署应该就能正常访问了，我的博客访问地址: gywgithub.github.io/gywgithub
更新博客
更新文章的话，使用 hexo new "My New Post" 创建好文件，然后直接把写好的 MarkDown 文章格式内容粘进去就行了，重新提交代码即可
参考链接
Hexo 官网：hexo.io/zh-cn/index...
GitHub Pages 上部署 Hexo：hexo.io/zh-cn/docs/...
版本记录
不同版本可能效果会有区别，这里记录一下版本
- node: v16.17.0
- npm: 8.15.0
- hexo-cli: 4.3.1
- hexo: [email protected]
写在最后
目前基于 GitHub 的免费博客平台就搭好了，总体操作不复杂，自己操作过程中也不是一帆风顺，由于我的操作是不同时间以及不同电脑上操作的，也遇到了各种小问题，遇到的问题一步步解决，通过搜索和分析也解决不了的问题，我就把项目删了重来
下一步准备把社区中发布的文章同步到这个博客站点，修改一下默认主题，或者基于默认主题自己用代码调整优化一下，以及添加评论功能等等，让整个博客内容丰富起来
欢迎大家讨论交流，如果文章感觉有用，随手点个赞再走呗
^_^🥰🥰微信公众号：草帽Lufei
