搭建个人主页的步骤如下:
- 先将我们写的文章或者照片生成静态页面(hexo)
- 并将这些静态页面部署到支持静态页面的服务器(github或coding)
- 这样我们就可以通过服务器的域名地址访问到自己的博客了(regeorge.github.io)
下面是操作步骤:
准备环境:
node.js(npm)的安装
1、hexo 是基于 node.js 来生成页面的
2、node.js 提供了 npm 包管理工具,后面安装 hexo 只需要几行命令hexo 的安装和初始化
1、完成后可以在本地生成默认的博客页面,并通过浏览器预览效果
2、常用的几条命令如下:hexo n p '文章标题' //新建文章 hexo g //生成页面 hexo s //本地预览 hexo d //提交页面
Hexo 常用部署命令详解
hexo g
(hexo generate)
- 作用:生成静态文件
- 原理:
- 读取 source 目录下的文件(主要是 markdown)
- 根据主题模板将内容渲染成 HTML
- 生成的静态文件存放在 public 目录
- 包含 HTML、CSS、JavaScript 等资源文件
hexo s
(hexo server)
- 作用:启动本地预览服务器
- 原理:
- 启动一个 Node.js 服务器
- 默认监听 4000 端口
- 将 public 目录作为网站根目录
- 支持实时预览(修改文件后自动更新)
hexo d
(hexo deploy)
- 作用:部署网站到远程服务器
- 原理:
- 首先将 public 目录下的文件复制到 .deploy_git 目录
- 在 .deploy_git 目录初始化 Git 仓库(如果不存在)
- 添加远程仓库(通常是 GitHub Pages)
- 提交所有文件并推送到远程仓库
hexo s -g
- 作用:生成静态文件并启动预览服务器
- 原理:
- 相当于顺序执行 hexo g 和 hexo s
- 生成的文件存在内存中,服务器关闭后不保存
- 用于本地快速预览效果
hexo g -d
- 作用:生成静态文件并立即部署
原理:
- 相当于顺序执行 hexo g 和 hexo d
- 先生成静态文件到 public 目录
- 然后立即部署到远程服务器
- 常用于确认内容无误后的发布
git 的安装和配置
1、git是用作版本控制的,也就是在本地生成的博客都是通过git来同步到云端服务器
2、上一条的提交页面命令hexo d
其实就是通过git将页面提交到配置文件中填写的github仓库的github 的注册和配置
1、github 提供了一个静态页面服务功能,这里要做的是在github上创建一个指定名称的仓库来放置本地生成好的博客页面文件
2、同时还需要把这个创建好的仓库地址填写到本地的配置信息中
具体的安装步骤请参考gdutxiaoxu的文章,每一步都非常详细:手把手教你用Hexo+Github 搭建属于自己的博客
配置主题
跟着上述参考文章的操作步骤配置好环境后,已经可以在本地预览到生成的博客界面了,按照这种方法生成的页面其实都是一样的,要让自己的博客不一样,一是要时常更新自己的文章,二是自定义页面的样式,网上也提供了很多开源的主题可以配置,非常方便,我推荐的主题有Next,Yilia,Yelee,更多的主题可以百度hexo theme
配置的方法就是将主题通过git pull到博客的theme目录下,然后按照该主题的说明文档(github上的readme.md)进行修改自定义的配置
提交页面
假设我们已经上面的参考文章配置好了提交的地址:在博客的根目录的配置文件_config.yml
中
# Deployment
deploy:
type: git
repo:
github: git@github.com:reGeorge/regeorge.github.io.git,master //github仓库
coding: git@git.coding.net:reGeorge/reGeorge.git,master //coding仓库
branch: master
这里我配置了两个地址,执行hexo d
命令时会分别向两个仓库推送本地生成的页面,这样我通过两个域名都可以访问到我的博客(coding国内访问的速度更快)
https://regeorge.github.io/
http://regeorge.coding.me/
踩坑记录
- hexo d 命令不生效
- 原因是 GitHub 的 workflows 配置不正确
- 解决方法:
- 在项目中创建 deploy.yml 文件
- 配置从 master 分支拉取静态网页文件的目录
- 发布到 gh-pages 分支以触发 GitHub Pages 的发布
- themes 目录中自定义 js 方法报错
- 问题:传入 tags.toArrays() 方法时报错
- 解决方法:
- 只需要在调用前判空处理
- 无需使用 toArrays() 方法