likes
comments
collection
share

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢

作者站长头像
站长
· 阅读数 4

海军大将-绿牛

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢

前言

由于在技术社区中发的文章主题、自定义布局等页面效果受限于社区平台提供的规则和主题，因此想着自己搭一个博客同步发表到社区中的文章，对于前端选手来讲，没事儿还能自己魔改一下，研究技术的同时，顺便还能自嗨一下，这里选择使用 Hexo 和 GitHub 来搭建自己的博客，主要原因如下

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢

Hexo 使用

Hexo 安装

使用 npm 或 yarn 全局安装

npm i hexo-cli -g

如果通过命令安装出现如下错误 permission denied，如下效果

$ 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 即可

sudo npm i hexo-cli -g

Windows

使用管理员权限，打开命令行提示符，执行如下命令

npm i hexo-cli -g

初始化博客文件目录

hexo init blog

进入blog目录，安装依赖

cd blog
npm install

hexo-cli 自动创建了相关文件和目录，这时候的 blog 项目目录为如下效果

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢

运行 Hexo 服务，本地预览

hexo server

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢

访问 http://localhost:4000/ 地址效果如下，这是 hexo 默认的主题效果，一个博客的基本雏形已经有了

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢

Github Pages 部署

创建仓库

创建一个 GitHub用户名 的仓库，提交本地生成 hexo 的仓库代码

设置 GitHub Pages

Settings > Pages > Source 选择 GitHub Actions ， 然后点击 create your own

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢

创建 pages.yml 部署流程文件，直接把 官方的配置 复制过来

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢

修改一下对应的 node 版本，把下面位置的 node 版本改成本地的 node 对应版本

- name: Use Node.js 16.x

注意！

这里的版本如果和本地不对应的话，在GitHub上部署后可能预览效果和本地会不一致

添加 pages.yml 文件成功后，在 Actions 选项中会有对应的工作流运行起来

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢

注意!

如果项目能访问，但是 css, jquery 等文件 404，导致页面样式不生效，如下效果，查看 _config.yml 文件中 URL 的配置，看是否是自己的 github 项目仓库链接

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢

修改 url 参数为自己的仓库地址

# 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和GitHub Pages搭建个人博客🏢

更新博客

更新文章的话，使用 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: hexo-cli@4.3.1

写在最后

目前基于 GitHub 的免费博客平台就搭好了，总体操作不复杂，自己操作过程中也不是一帆风顺，由于我的操作是不同时间以及不同电脑上操作的，也遇到了各种小问题，遇到的问题一步步解决，通过搜索和分析也解决不了的问题，我就把项目删了重来

下一步准备把社区中发布的文章同步到这个博客站点，修改一下默认主题，或者基于默认主题自己用代码调整优化一下，以及添加评论功能等等，让整个博客内容丰富起来

欢迎大家讨论交流，如果文章感觉有用，随手点个赞再走呗 ^_^ 🥰🥰

微信公众号：草帽Lufei

不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢