目 录CONTENT

文章目录

利用hexo+github搭建个人博客

米尔嘉
2022-06-26 / 1 评论 / 5 点赞 / 600 阅读 / 1,713 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-07-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

hexo博客框架介绍

  • Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看

  • Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。一般选择结合github使用,无需支付服务器成本相对于 Typecho 和 WordPress 这类动态博客来说, Hexo 跟他们的最大区别就是静态了(这里的“动态、静态”主要是指其对数据处理的方式,通过数据库来动态的查询、调用、展示的叫“动态”,直接生成纯.html网页文件来供浏览的叫“静态”)

  • 分析:非常流行的静态博客框架,自由度高,也许是长期博客的最终选择。

  • 优点:站点的访问只需要有一个“托管”的平台即可,一个域名+一个免费托管平台就可以搭建一个博客网站了;自由度高,有能力的情况下能高度DIY定制;主题多。

  • 缺点: 搭建相对而言较为复杂,需要一些专业技术,没有后台管理系统。

搭建hexo博客框架

安装git

官网下载,安装好之后,用下面的代码检查有没有安装成功。

git --version

安装node.js

官网直接下载,安装好后,检查node的安装情况

node -v

再检查npm的安装情况,

npm -v

安装hexo

安装好node.js之后,我们就可以安装hexo博客框架了,首先在电脑盘里创建一个新的文件夹,可以命名为Blog。

选中Blog文件夹,右击点Git Bash Here(建议使用cmd转到Blog文件夹下,进行安装),输入下面的代码,开始全局安装hexo博客框架

npm install -g hexo-cli

安装完毕之后,可以用下面的代码进行检测,出现版本号就代表框架安装好了

hexo -v

生成本地博客

还是在Blog文件夹下,右键git bash here,输入下面的代码 ,进行初始化

hexo init

安装依赖包

npm install

这时候,你的blog文件夹下会自动生成几个文件夹

  • node_modules(依赖包)
  • public(存放本地生成的博客页面)
  • scaffolds(生成文章用的模板)
  • sources(存放你的博客文章)
  • themes(博客的主题)
  • _config.yml(博客的配置文件)

输入下面的指令,就可以生成本地博客了

hexo g
hexo s

打开浏览器,输入localhost:4000,你就能看到生成的本地博客了,按crtl+c关掉本地博客,开始进行下一阶段的任务

使用git与github建立连接

github创建个人仓库

生成SSH公钥并添加到github中

生成ssh公钥

通过git,可以将我们本地博客的内容,发送到githuab中,生成ssh公钥可以让我们不用输入密码,就能传送文件到github上。

在blog文件夹中git bash,输入下面的代码,yourname为你github的用户名

git config --global `[`user.name`](http://user.name)` "YourName"

然后是绑定你的邮箱,邮箱也是你github注册时使用的邮箱

git config --global user.email "YourEmail"

你同样可以使用如下代码检查git有没有关联成功你的github账号

git config user.name
git config user.email

然后使用如下代码创建ssh密钥

ssh-keygen -t rsa -C "youremail"

这个时候,你会发现在你的电脑里生成了一个.ssh的文件夹,找到这个文件夹,复制id_rsa.pub中的内容,这个文件夹可以直接用记事本打开

将公钥内容添加到github中

进入github,找到settings页面,找到左侧的ssh and GPG keys,点击new ssh key,将id_rsa.pub复制的内容,添加到key中,标题随便取,这个时候,我们的git和github就绑定好了

然后在gitbash中,检查是否连接成功

ssh -T git@github.com

将hexo本地博客部署到github中

这一步,是将hexo生成的本地博客,部署到github中,找到blog文件夹下的_config.yml文件夹,用vs code打开,翻到最后面,改成如下代码

deploy:
type: git
repo:  [git@github.com](mailto:git@github.com):你的github用户名/你的github用户名.github.io.git
branch: main

还需要修改一个地方,修改url,并添加root

url: https://你的github用户名.github.io 
root: /
  • 这里的url就是你的博客网址,如果你的博客网址带有子文件夹,则root后面写的是子文件夹名称,没有就写一斜杠,跟着上面步骤来是没有子文件夹的。
  • 最好安装git部署插件,这样我们就可以通过git的命令,将hexo 本地博客部署到github中
npm install hexo-deployer-git --save

最后,执行下面代码,我们就能在网站看到自己的博客了。

hexo c
hexo g
hexo d 

hexo c是清理缓存,hexo g 是生成静态页面,hexo d是部署博客,另外也可以在生成静态页面之后,使用hexo s在本地查看效果,然后ctrl+c关闭,再hexo d部署
其中 hexo clean清除了你之前生成的东西,也可以不加。
hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写
hexo deploy 部署文章,可以用hexo d缩写
注意deploy时可能要你输入username和password

更换主题

推荐使用butterfly主题,参考官方文档进行配置。

参考文章

5

评论区