使用Hexo搭建基于Github的个人博客【详细】

1. 基础

在开始之前,如果你下面的 技术工具 有所了解或比较熟悉,可以加快你的进度:

  • Github
  • 版本控制工具 Git
  • Hexo
  • node
  • 包管理工具 npm/yarn

如果你不太熟悉这些,也没有很大的关系,至少先搭建起来是没有问题的。

博主的博客搭建完成,欢迎踩踩?:小鲤鱼

2. 创建Github远程仓库

注册GitHub账号 (Sign up)

只需要一个能够验证的邮箱即可,填写相关信息之后会发邮件验证。

Github官网
在这里插入图片描述

新建仓库 (Create Repository)

注册完成之后登录 (Sign in)
在这里插入图片描述
登录之后选择右上角的 + 号选择新建仓库 (New Repository)
在这里插入图片描述
【注意】
仓库名 (Repository name)必须是 username.github.io 的形式,username 就是GitHub账号的 username
然后点击 Create Repository 就可以创建了。
在这里插入图片描述
创建之后,点击 Setting 往下翻,找到 Github Pages 可以看到 your site is published at https://username.github.io 就说明成功了。这个地址就是你的私人博客的地址。
在这里插入图片描述
在这里插入图片描述
【tips】
之前是直接新建了一个名为 username.github.io 的仓库,如果你之前存在其他的仓库,那你把它重命名成 username.github.io 也是可以达到同样的效果。

3. 使用Hexo创建本地项目

安装Hexo

需要先全局安装 hexo,这里使用的是 npm 安装方式 (国内使用cnpm更快)

npm install hexo-cli -g

安装完成之后,在命令行工具输入 hexo -v 检查是否安装成功。
如果你能看到下面的结果就说明成功了。
如果看到 'hexo' 不是内部或外部命令,也不是可运行的程序或批处理文件。 说明环境变量存在一些问题。
在这里插入图片描述

熟悉 hexo 的几个命令

如果只是搭建博客的话,下面的几个命令就足够了:

#初始化一个项目
hexo init

#生成静态网页文件,g是generate的缩写 
hexo g

#运行到服务器端,s是server的缩写
hexo s

#部署到远端GitHub
hexo deploy

#清理生成的文件
hexo clean

创建本地项目

新建一个空的文件夹,双击打开,右键 Git Bash Here ,或者你也可以手动切换到这个目录下,执行 hexo init
在这里插入图片描述
你有可能会卡死在 Install dependencies 的地方,那么你需要检查 yarn的安装与环境配置。
现在在你的本地项目目录下执行hexo ghexo s 就可以在本地运行了。
默认的运行地址是 http://localhost:4000
hexo g 会帮你生成静态的网页文件
在这里插入图片描述
hexo s 会帮你部署并运行起来
在这里插入图片描述
在这里插入图片描述

熟悉目录结构

node_modules #本地依赖模块
public #hexo g生成的目录,包含静态网页文件,就是看到的博客
source #源文件,用来存放我们的.md源文件
themes #主题文件夹,里面存放主题
_config.yml #项目配置文件,用来配置博客具体的显示内容等
db.json #存储一些用到的数据
package.json #依赖配置

.deploy_git #hexo s部署到远端的时候会生成的文件夹,是根据public文件夹生成的,内容是差不多的

在这里插入图片描述
【博客文件文件夹】
最基础的我们要知道 source > _post 文件夹是我们存放博客 .md 文档的地方,hexo 会根据这里的文件生成对应的静态博客网页。

4. 推送到远端 Github

安装 deployer 插件

npm install hexo-deployer-git --save

配置_config.yml

打开项目的_config.yml 文件,找到 deploy,这里使用的是 SSH 的方式。
在这里插入图片描述
打开 Github 上面对应的仓库,选择 clone or download 复制你的 SSH key,分支默认 master
在这里插入图片描述

生成公私钥

在推送的时候需要用到。

ssh-keygen -t rsa -C "注册git使用的邮箱"

一路回车,看到下面的结果说明成功。
在这里插入图片描述

添加公钥到 Github

找到生成的 id_rsa.pub 公钥文件,复制公钥内容到 GitHub
步骤:Setting -> Deploy keys -> add deploy key -> Add key
在这里插入图片描述
在这里插入图片描述
记得勾选写权限,即允许推送 (Allow write access)
在这里插入图片描述

开始推送

hexo deploy

推送完成就可以在GitHub上看到刚刚推送的内容,同时在博客地址也可以看到。

5. 进阶优化

更换主题

Hexo主题官网
选择自己喜欢的主题,克隆到本地,放在 themes 文件夹下;
修改 _config.yml 文件中的 theme 字段为 主题的名字就可以了。

其他

还支持添加 评论系统 网站访问统计 等,有些兴趣的小伙伴可以研究。

发布了29 篇原创文章 · 获赞 8 · 访问量 4764

猜你喜欢

转载自blog.csdn.net/qq_40738077/article/details/102230971