Github+Hexo搭建我的个人博客

发表于 更新于 分类于 本文字数： 1.1k 阅读时长 ≈ 4 分钟

准备工作：

  • 安装Node.js
  • 安装Git
  • 注册一个GitHub账号。

登录Github账号，新建一个仓库

填写仓库名，命名为username.github.io，（这里的username输入你的GitHub用户名）其他设置默认，在页面底部点击Create repository。

点击creating a new file，新建一个index.html，

内容随便填，我填的是 

1
2
3
4
5
6
7
8
<html>
   <head>
     <title></title>  
   </head>
   <body>
       hello,world!
   </body>
</html>

在页面底部点击Commit new file，在浏览器打开https://username.github.io（这里的username输入你的GitHub用户名），默认打开index.html页面。

配置SSH key

（接下来在Github上提交代码，需要利用SSH key来获得权限，如果已经配置过，此步可跳过）
打开Git Bash，输入命令

1
git config --global user.name "yourname"
1
git config --global user.email "youremail"

（这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。）

可以输入以下命令命令检查输入的内容是否正确

1
git config user.name
1
git config user.email

接着输入命令

1
ssh-keygen -t rsa -C "youremail"

（这里的youremail输入你GitHub的邮箱）
连续按回车键，在用户目录下会生成一个.ssh文件，找到里面的id_rsa.pub文件复制里面的内容，我的SSH key文件在C:\Users\sammie.ssh路径下

在GitHub右上角点击头像，Setting->-> SSH and GPG keys -> New SSH key，把刚才复制的内容粘贴到上面，title随便填写。

输入以下命令检查是否成功

1
ssh -T git@github.com

安装Hexo

hexo官方文档
自定义一个文件夹安装Hexo，我新建的文件夹路径是D:\Blog，选中Blog文件夹，右键，选择Git Bush Here，输入命令安装hexo

1
npm install -g hexo-cli

查看版本命令

1
hexo -v

输入命令初始化hexo

1
hexo init

输入命令静态部署

1
hexo g

网页部署完成，输入命令查看

1
hexo s

浏览器输入http://localhost:4000就可以打开新部署的页面，Ctrl+C可以停止运行。

将hexo部署到github上

打开D:\Blog路径下的_config.yml文件

在文件底部填写内容

1
2
3
4
deploy:
  type: git
  repository: https://github.com/isammiei/isammiei.github.io.git  #你的仓库地址
  branch: main

repo填写你GitHub仓库的名称。
branch 填你刚刚创建GitHub仓库的默认分支名称，看下是master还是main，填和你GitHub仓库对应的名称。

在D:\Blog路径下，选中Blog文件夹，右键，选择Git Bush Here，输入命令，

1
2
3
4
5
6
7
npm install hexo-deployer-git --save

hexo clean #清除了你之前生成的东西。

hexo generate #生成静态文章，可以用 hexo g 缩写

hexo deploy #部署文章，可以用hexo d缩写

稍等片刻就可以在https://username.github.io（这里的username输入你的GitHub用户名）看到你的博客了。

给博客安装Hexo主题

可以在hexo.io寻找免费的博客主题进行安装，里面附有安装教程。

我安装的主题是
hexo-theme-matery

在https://github.com/blinkfox/hexo-theme-matery下载压缩包，解压到D:\Blog\themes路径下，解压后的文件夹改名为matery

打开D:\Blog路径下的_config.yml文件，修改theme属性，改为matery

因为我要用到的主题分支是master，所以我把branch属性改成master

language属性改为中文，修改为zh-CN

在D:\Blog路径下，选中Blog文件夹，右键，选择Git Bush Here，输入命令

1
hexo clean && hexo g && hexo d

重新部署，稍等片刻便可在https://username.github.io（这里的username输入你的GitHub用户名）看到主题发生变化。

接下来根据文档修改内容，设计自己的博客。每次配置完，都要在D:\Blog路径下，选中Blog文件夹，右键，选择Git Bush Here，输入命令更新配置

1
hexo clean && hexo g && hexo d

我给大家提醒一下：

  1. 分类 categories 页，标签 tags 页，关于我 about 页，是在D:\Blog路径下的source文件夹中新建。
  2. 菜单导航设置，个人社交链接等设置，是在D:\Blog\themes\matery路径下的_config.yml中配置。
  3. 认真查看D:\Blog和D:\Blog\themes\matery路径下的_config.yml文件，修改里面的内容，设计自己的博客。
  4. 如果要更换其他hexo主题，下载压缩包，解压到D:\Blog\themes路径下，之后，和上面的例子是同样的操作。