搭建 Github 上的 Hexo 博客

1.准备

1.1环境搭建

Hexo 基于 Node.js,需要安装 Node.js 和 Git。

1.2创建 Github Pages 仓库

GitHub 主页右上角加号 -> New repository:

  • Repository name 中输入 用户名.github.io
  • 勾选 “Initialize this repository with a README”
  • Description 选填

创建完后在上面创建的仓库里面点击Settings(不是头像下面那个Settings),向下拉到最后有个Pages,点击Choose a theme选择一个主题。然后等一会儿,再回到GitHub Pages

 

 点击这个链接,就可以预览效果啦。

2.连接 Github

    创建 hexo 博客项目文件夹:Hexo

     右键文件, 打开 Git Bash 命令行窗口

git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"

2.1创建 SSH 密匙

  输入命令然后一路回车。

ssh-keygen -t rsa -C "GitHub 邮箱"

2.2添加密匙:

进入 [C:\Users\用户名\.ssh] 目录(要勾选显示“隐藏的项目”),用记事本打开公钥 id_rsa.pub 文件并复制里面的内容。

登陆 GitHub ,点击头像进入 Settings 页面,选择左边栏的 SSH and GPG keys,点击 New SSH key。

 Title 随便取个名字,粘贴复制的 id_rsa.pub 内容到 Key 中,点击 Add SSH key 完成添加。

2.3验证连接:

打开 Git Bash,输入命令出现 “Are you sure……”,输入 yes 回车确认。

ssh -T git@github.com 

显示 “Hi xxx! You've successfully……” 即连接成功。

3.本地安装 Hexo

3.1 安装 hexo cli

npm install hexo-cli -g

3.2 初始化博客项目

hexo init

3.3 生成博客静态文件

hexo g

3.4 启动本地的测试服务器

hexo s

默认使用4000端口,进不去可能是端口被占用, 进去页面说明配置成功了

暂时修改启动端口:hexo s -p 80 

永久修改启动端口:vim node_modules\hexo-server\index.js   修改默认的port值。

hexo s -p 80 

 http://localhost:4000/ 进去的页面

3.5配置博客

修改项目根目录的_config.yaml文件

配置博客的标题、作者等相关信息:

 配置github pages 仓库地址:

 3.6 配置 git 用于部署 hexo 博客到 github pages 仓库

git init
npm install --save hexo-deployer-git  //hexo依赖

3.7 上传到github

hexo g
hexo d

4 安装主题

4.1 下载butterfly主题

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

 编辑项目根目录的文件: _config.yml  切换butterfly主题

4.2 butterfly主题需要的插件 

npm install --save hexo-renderer-pug hexo-renderer-stylus

4.3 测试

命令输入hexo -g hexo-s

http://localhost:4000/

posted @ 2022-10-07 22:00  卟怪  阅读(28)  评论(0编辑  收藏  举报