使用Pages+Hexo搭建个人博客总结
创始人
2024-06-02 02:42:13
0

Github Pages是Github免费给开发者提供的一款托管个人网站的产品,而Hexo是一款基于Node.js的静态博客框架,拥有依赖少、易安装、易使用的特性,它们的组合非常适合快速搭建个人博客。接下来是我搭建个人博客的步骤总结。

文章目录

  • 1. 安装Node.js
  • 2. 安装Hexo
  • 3. 本地查看博客效果
  • 4. 部署到Github Pages
  • 5. 将本地文件更新到Github的库中
  • 6. 更换博客主题
  • 7. 发表文章
  • 8. 其他

1. 安装Node.js

进入官方网站下载合适的版本并安装。
在这里插入图片描述

2. 安装Hexo

  1. 选择一个磁盘,新建一个文件夹,自己重命名文件夹(如:我的文件夹为:D:\Github),博客相关文件将储存在此文件夹下,进入该文件夹,右键鼠标,点击 Git Bash Here,输入以下 npm 命令即可安装:
$ npm install hexo-cli -g  
$ npm install hexo-deployer-git --save

第一个命令表示安装 hexo,第二个命令表示安装 hexo 部署到 git page 的 deployer,如图所示即为安装成功:
在这里插入图片描述
在这里插入图片描述
2. 在刚才新建的文件夹里面再次新建一个 Hexo 文件夹(如:我的文件夹为:D:\Github\Hexo),进入该 Hexo 文件夹右键鼠标,点击 Git Bash Here,输入以下命令:

$ hexo init

如图所示则安装成功:
在这里插入图片描述
Hexo 安装完成后,将会在指定文件夹中新建所需要的文件,Hexo 文件夹下的目录如下:
在这里插入图片描述

3. 本地查看博客效果

执行以下命令:

$ hexo generate  
$ hexo server

执行完显示以下信息说明操作成功:

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可通过浏览器进入 http://localhost:4000/ 查看效果

4. 部署到Github Pages

到目前为止,我们的博客在本地已经搭建成功了,但是现在我们只能通过本地连接查看博客,我们要做的是让其他人也能够访问我们的博客,这需要我们将博客部署到Github Pages上。

  1. 点击 New repository 开始创建,仓库名称为:
你的用户名.github.io
  1. 配置SSH密钥
    只有配置好 SSH 密钥后,我们才可以通过 git 操作实现本地代码库与 Github 代码库同步,在你第一次新建的文件夹里面(如:我的文件夹为:D:\Github) Git Bash Here 输入以下命令:
$ ssh-keygen -t rsa -C "youremail@example.com"    
// 其中youremail@example.com为你的邮箱地址

之后会出现:

Generating public/private rsa key pair.  
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):    
// 到这里可以直接回车将密钥按默认文件进行存储

然后会出现:

Enter passphrase (empty for no passphrase):    
// 这里是要你输入密码,其实不需要输什么密码,直接回车就行   
Enter same passphrase again:

接下来会显示:

Your identification has been saved in /c/Users/you/.ssh/id_rsa.  
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.  
The key fingerprint is:  
这里是各种字母数字组成的字符串,结尾是你的邮箱  
The key s randomart image is:    
这里也是各种字母数字符号组成的字符串

运行以下命令,将公钥的内容复制到粘贴板上:

$ clip < ~/.ssh/id_rsa.pub
  1. 在GitHub上添加公钥
    进入GitHub的Settings,点击SSH and GPG keys,将粘贴板上的内容复制到key中,title可以自己起名。
    测试
  2. 在Git bash中输入以下命令,注意不需要改动任何字符
$ ssh -T git@github.com

若验证通过则操作成功,否则自行排查错误原因。

5. 将本地文件更新到Github的库中

在GitHub仓库中复制SSH的地址,之后打开你创建的 Hexo 文件夹(如:D:\Github\Hexo),右键用记事本(Notepad++或者VS code等都可以)打开该文件夹下的 _config.yml 文件,修改deploy下的配置:
在这里插入图片描述
在 Hexo 文件夹下分别执行以下命令:

$ hexo g  
$ hexo d

或者直接执行:

$ hexo g -d

执行完之后会让你输入你的 Github 的账号和密码,如果此时报以下错误,说明你的 deployer 没有安装成功。

ERROR Deployer not found: git

需要执行以下命令再安装一次:

npm install hexo-deployer-git --save

之后再执行

hexo g -d

你的博客就会部署到 Github 上了

你的博客地址为:https://你的用户名.github.io,比如,我的是:https://yuhsihu.github.io 。
恭喜你!现在每个人都可以通过此链接访问你的博客了!

6. 更换博客主题

进入官方网站更换你喜欢的博客主题。

  1. 选择一个你喜欢的博客主题。

  2. 进入到博客样式的git仓库,复制仓库地址

  3. 在Hexo/themes下clone这个仓库

  4. 等待clone完成后即可在 themes 目录下生成对应文件夹,然后打开 Hexo 文件夹下的配置文件 _config.yml ,找到关键字 theme,修改参数为相应文件夹名称,注意冒号后面有一个空格!

  5. 返回 Hexo 目录,右键 Git Bash Here ,输入以下命令开始部署主题:

$ hexo g   
$ hexo s

此时打开浏览器,访问 http://localhost:4000/ 就可看见我们的主题已经更换了,如果感觉效果满意,我们就可以把它部署到Github上了。

  1. 打开 Hexo 文件夹,右键 Git Bash Here ,输入以下命令:
$ hexo clean

该命令的作用是清除缓存,若不输入此命令,服务器有可能更新不了主题。

$ hexo g -d

此时访问自己的github.io即可看见更换后的主题,但我们仍然需要对主题的相关配置进行修改,比如站点标题、导航栏、图标等等。
Hexo 中有两份主要的配置文件,名称都是 _config.yml ,它们均是用于站点配置使用的。其中,一份位于站点根目录下(比如我的:D:\Github\Hexo_config.yml),主要包含 Hexo 本身整站的配置;另一份位于主题目录下(比如我的:D:\Github\Hexo\themes\hexo-theme-consice_config.yml),这份配置由样式的作者提供,主要用于配置主题相关的选项,一般 _config.yml 文件里都有相关注释,按需修改即可。

7. 发表文章

在Hexo的_config.yml中把Writing部分的post_asset_folder的键值由false改为true,意思是每次新建文章也一起建一个文件夹用于存放资源。

Git bash中输入如下命令:

$ hexo new [post] 标题

即新建一篇layout为post的文章,除了post,还可以选为page或draft。后面的标题自己起名,之后会在source/_posts下看到markdown格式的新文章。

8. 其他

  1. 在多次本地预览Hexo的时候,可能会出现4000端口被占用的情况。可以Win+R进入cmd:
netstat -aon|findstr "4000"

如果是Hexo占用了,可以先杀死进程:

taskkill /pid 4000 -t -f

如果被其他不可以被杀死的占用了,可以在Hexo配置文件中修改端口。

  1. 一定要分清楚Hexo的_config.yml和themes下自定义主题的_config.yml,针对博客本身的设置是Hexo下的_config.yml,而针对风格主题的设置是theme下的_config.yml。
  2. Hexo的其他详细使用可以查看中文官方文档。
  3. Hexo博客文章中引用图片的方式不同于markdown中的方式:
![ABC](./XXX/ABC.png)

而是:

{% asset_img 文件名 %}

即不再需要写相对路径。

相关内容

热门资讯

神武3安卓跟苹果系统,安卓与苹... 你有没有发现,最近手机游戏界又掀起了一股热潮?没错,就是那款让人欲罢不能的神武3!不过,说到玩这款游...
安卓手机双系统好处,安卓手机的... 你有没有想过,你的安卓手机其实可以拥有双重身份呢?没错,就是那个听起来就让人兴奋的“双系统”!今天,...
咋录音软件推荐安卓系统,轻松捕... 你有没有想过,有时候想要记录下生活中的点点滴滴,或者制作一段属于自己的音乐作品,一款好用的录音软件可...
安卓7.1系统好不好,体验升级... 你有没有听说安卓7.1系统最近在手机圈里可是火得一塌糊涂呢?这不,我就来给你好好捋一捋,看看这个系统...
安卓系统到底为何卡顿,性能瓶颈... 你有没有发现,你的安卓手机有时候就像蜗牛一样慢吞吞的,让你等得心急火燎?别急,今天就来揭开安卓系统卡...
安卓系统如何自定图标,Andr... 你有没有发现,手机里的图标有时候看起来有点单调,甚至有点无聊呢?别急,今天就来教你怎么给安卓系统的图...
安卓系统的设置密码在哪,安卓系... 手机里的秘密太多啦,有时候连自己都忘了密码是啥!别急,今天就来手把手教你,安卓系统里的设置密码到底藏...
hk1box安卓原生系统和安卓... 亲爱的读者们,你是否曾为寻找一款既能满足日常使用,又能畅享大屏娱乐的安卓系统而烦恼?今天,就让我带你...
安卓手机系统崩溃蓝屏,揭秘原因... 手机突然蓝屏了,是不是瞬间感觉世界都安静了?别慌,今天就来和你聊聊安卓手机系统崩溃蓝屏的那些事儿。你...
平板电脑鸿蒙和安卓系统,平板电... 你有没有发现,最近平板电脑市场又热闹起来了呢?各大品牌纷纷推出新品,而其中最引人注目的莫过于鸿蒙系统...
安卓系统的帮助与反馈,提升用户... 你有没有发现,使用安卓系统的时候,有时候会遇到一些小麻烦,但别担心,安卓系统可是非常贴心的,它总有一...
安卓11系统4g,4G性能优化... 你知道吗?最近安卓系统又更新啦!这次可是安卓11系统哦,而且它还支持4G网络呢!是不是很激动?那就跟...
安卓系统怎么远程删除,远程删除... 你是不是也有过这样的经历:手机里的文件不小心误删了,或者某个应用突然变得异常,你想要远程清除它,但又...
安卓系统点歌软件app,打造个... 你有没有发现,现在手机里装满了各种APP,而其中有一个小家伙,几乎成了安卓手机用户的“音乐小助手”,...
p40安卓系统下载,下载与体验... 你有没有发现,最近你的手机是不是有点儿慢吞吞的?别急,别急,让我来给你支个招儿——升级你的P40安卓...
vivoiqoo3的安卓系统,... 你有没有发现,最近手机圈里又掀起了一股热潮?没错,就是vivo旗下的子品牌iQOO的新款手机——iQ...
系统可以直接还原吗安卓,轻松恢... 你有没有想过,手机里的那些照片、视频、联系人,如果突然消失了,那得多难过啊!别担心,今天就来聊聊这个...
安卓系统管控怎么解开,安卓系统... 你是不是也遇到了安卓系统管控的烦恼?手机被限制了,感觉自由受限,是不是超级郁闷?别急,今天就来手把手...
华为升级系统安卓11,开启智能... 你知道吗?最近华为的大动作可不少呢!他们家的新款手机升级了安卓11系统,这可真是让人眼前一亮啊!咱们...
安卓系统木马病毒生成,生成原理... 安卓系统木马病毒生成:揭秘网络威胁的新面孔在数字化时代,智能手机已经成为了我们生活中不可或缺的一部分...