当前位置: 代码迷 >> 综合 >> Github Pages + Hexo 搭建自己的个人博客
  详细解决方案

Github Pages + Hexo 搭建自己的个人博客

热度:0   发布时间:2023-12-09 19:41:21.0

市面上的博客种类很多,但有一说一,csdn博客外观还不错,阅读量、SEO也都不错,但是就是可定制性太差(不知道会不会因为这句话不过审),博客园虽然可以自己定制,但门槛有点高,默认外观又太low…… 这些博客让我萌生了建自己服务器的念头,但是由于年龄限制,一个小学生注册域名,结果可想而知(T_T)

但俗话说,上帝给你关上了一扇门,一定会为你开一扇窗。阴差阳错之下,我了解到可以用 GitHub Pages建站,立刻就开始了折腾

想看到效果的可以访问我的博客 rpiws.github.io

-----------------------------正文-------------------------------

1. 准备工作

本文示例环境:Windows 8.1

准备1:有一个 GitHub 账号,网址,点击右上方 Sign Up 然后跟着提示一步一步走~

准备2:Git on Windows 要安排上,网址,点击下面 Assets 适合你电脑版本的安装包,记住一定要是 Git 开头的 .exe 结尾的文件!)然后安装,过程一路 Next~

 

准备3:有一个 Node.js 环境,网址,进去会比较慢,点击红箭头标出来的地址,也就是Windows Installer (.msi) 右边的64-bit下载Node.js(32位的请点击 32-bit),下载完安装过程一路 Next,这里不过多赘述~

可选:一个VPN加速器,帮助访问 GitHub,要不然 GitHub DNS 被污染,经常进不去。当然欧皇可免~ (不是吹,我上过 100 多次 GitHub,就 3 次进不去)

2. 创建你的 GitHub Pages

打开 github.com,点击鼠标指的 Create repository;

Repository name 填 你github的用户名.github.io,如下图,显示 xxx.github.io is available 就可以; 

然后滑到下方点击 create repository ;

 

 点击鼠标位置“Settings”;

左侧选择 Pages,右侧点击 Choose a theme;

 上方几个主题随便选一个,然后点击“Select theme”;

 滑到下方点击鼠标位置“Commit changes”,你的GitHub Pages 就大功告成啦!

 等个1分钟左右,访问 github用户名.github.io 应该就可以显示如下内容啦~

 3. 配置 Git 与 GitHub 用户绑定

 右键电脑桌面,点击“Git Bash here”,打开 Git Bash,输入如下内容配置用户名邮箱:

git config --global user.name “你GitHub用户名”

git config --global user.email “你GitHub的邮箱”

然后输入:

cd ~

然后输入:

ssh-keygen -t rsa -C “GitHub邮箱地址”

Windows 文件管理器进入 用户目录/.ssh ,把id_rsa.pub文件里面的内容 Copy 一份;

打开 github.com 点击右上角那个头像,选择 Settings;

 左侧栏选择SSH and GPG keys,右侧选择 New SSH Key;

 Title随便写,Key填刚刚Copy过来的,点击Add SSH key;

 桌面右键打开 Git Bash ,输入

ssh -T git@github.com

回车,输入yes回车,看到最后一行 “Hi, 你的GitHub用户名”然后接着一大堆看不懂的东西,就说明绑定成功了!

4. 安装 Hexo 博客

前面配置了辣么多,主角终于上场了~

桌面右键打开 Git Bash,输入以下内容安装 Hexo:

?npm install -g hexo

随便哪个位置新建一个文件夹,然后 git bash  cd 到那个目录(比如 C:\hexo 在 git bash 里的路径是/c/hexo)

然后输入以下内容:

hexo init

静等一会儿,直到提示成功,如果报错先确定你新建的文件夹是不是空的,如果里面有东西把整个文件夹删了再重新建一个再重新输入,如果里面没东西直接重试,直到提示成功为止。我试了三次才成功~

5. 给 Hexo 添加主题(可选)

这里是官方主题,我选用的是第三方的 hexo-theme-yilia主题~

在 Git Bash 输入如下内容(一行一行输,如果报错多试几次,GitHub的魔幻特性):

?cd 你hexo的位置
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

然后编辑 hexo 目录下的_config.yml文件,翻到最底下,把theme:landscape改成theme:yilia,保存~

6. 把 Hexo 上传 Github

编辑 hexo 目录下的_config.yml文件,翻到最底下 deploy 部分,把该部分改成如下内容:

deploy:type: gitrepository: git@github.com:你github用户名/github pages仓库名.gitbranch: main

(备注:branch 我看网上大部分是填 master,但是我填了没用,所以改成了 main。如果main不行的请换成 master 试试)

然后安装 pull 插件(仅需安装一次,下次就不用安装):

npm install hexo-deployer-git --save

然后 Git Bash 输入以下内容:

hexo g
hexo d

等大概七八分钟左右,hexo就在你的 GitHub Pages 跑起来啦~

7. Hexo 的使用

由于GitHub Pages 搭建的网站是静态网站,所以这直接把类似 Typecho 之类的动态博客 ban 掉了。Hexo能在 GitHub Pages 运行的基本原理就是它的博客是保存在本地的,然后什么时候想提交就提交~

Hexo的一些基本命令(这些命令一定要在 Hexo 博客目录下才能运行)

创建一个新博客,博客地址在hexo目录/source/_posts目录下:

hexo n "博客名"

生成静态页面:

hexo g

提交(必须先生成再提交)

hexo d 

本机预览(访问localhost:4000以查看预览)

hexo s 

其它命令由于不常用,在此不做赘述~

由于生成的博客是 Markdown 文件,这里推荐一款超好用的 MD 编辑器——Typora。虽然typora现在要收费,但我这里有早期的免费 beta 版,功能与收费版几乎一样!

下载链接(本站是我另外一个 GitHub Pages 站点,是一个资源站,HTML+CSS 代码纯手打,没有参考模板,所以ui有点丑,欢迎感兴趣的童鞋来访!网站链接)

附上一张Typora使用截图:

到这里,GitHub Pages 个人博客的搭建就大功告成啦! 

P. S. 我搭建这个博客的初衷是想建一个树莓派折腾博客,由于经常折腾树莓派,所以想把经验写在一个专门的树莓派博客上。网址:rpiws.github.io 欢迎访问!

P. P. S. 过程很多都是参考这篇文章:http://blog.haoji.me/build-blog-website-by-hexo-github.html,如果我写的不好或理解不了可以参考这篇文章~

  相关解决方案