AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

使用Hexo 搭建你的技术博客

2021-12-09 194
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 如果你是个热爱分（zhuang）享（bi）的人，如果你是一个不甘寂寞的程序猿（媛），你想搭建一个属于自己的个人网站，那么请跟着这篇文章操作一遍，几乎免费让你快速拥有自己的博客网站，写文章记录生活，享受这种从0到1的过程。

前言


如果你是个热爱分（zhuang）享（bi）的人，如果你是一个不甘寂寞的程序猿（媛），你想搭建一个属于自己的个人网站，那么请跟着这篇文章操作一遍，几乎免费让你快速拥有自己的博客网站，写文章记录生活，享受这种从0到1的过程。


Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GayHub上，是搭建博客的首选框架，而且有个Github的个人博客逼格一下就上来了！


要想更全面的了解Hexo，可以访问官网 https://hexo.io/zh-cn/docs/


hexo 安装配置

基础组件


安装 Hexo 相当简单，只需要先安装下列应用程序即可：


  • git


  • node.js (Node.js 版本需不低于 8.10，建议使用 Node.js 10.0 及以上版本)


这两个组件安装都很简单，而且作为一名合格的程序猿/媛应该都接触过，安装步骤我们就直接略过了。在你安装完成后可以使用 git --version，和 node -v 两个指令来验证安装结果。


1.png


安装hexo


所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

npm install -g hexo-cli
安装完成后可以使用shell命令 hexo -v 验证安装结果，如下所示：


2.png


创建博客


建立文件夹，然后进入文件夹后执行 hexo -init shell命令，初始化博客，具体操作如下：


mkdir/blogcdbloghexo-init


初始化完成后会在当前目录生成如下几个目录文件


3.png


node_modules：依赖包public：存放生成的页面scaffolds：模版 文件夹。当新建文章时，Hexo 会根据 scaffold 来建立文件。source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。themes：主题文件夹_config.yml  : 博客的配置文件，大部分配置都是基于这个文件完成。


初始化后我们就可以发布博客了，现在本地体验一下效果：


hexoghexoserver


这样在浏览器访问 http://localhost:4000 就可以查看博客效果了！


4.png


github配置

建立仓库


在github上创建一个和你用户名相同的仓库，后面加 .github.io，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是http://yourname.github.io，其中yourname就是你注册GitHub的用户名。


比如博主的用户名是 jianzh5，那么我建立的仓库就是 jianzh5.github.io


5.png


生成ssh


  • 使用下面命令配置你的git信息


gitconfig--globaluser.name"yourname"gitconfig--globaluser.email"youremail"


这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。


  • 可以用命令检查并确认你的配置


gitconfiguser.namegitconfiguser.email


6.png

image.png


  • 生成ssh ssh --keygen -t rsa -C "youremail" 一直回车即可生成ssh，如下所示，图中显示了你生成ssh的位置。


7.png


ssh就是一组秘钥。其中，id_rsa是你自己电脑的私人秘钥，id_rsa.pub是公共秘钥。我们把公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。


  • 配置ssh 在GitHub的setting中，找到SSH keys的设置选项，点击New SSH key 把你的id_rsa.pub里面的内容信息复制进去。


8.png


  • 验证ssh是否配置成功 ssh -T git@github.com

关联


搭建好了Hexo博客，创建好了Github仓库，接下来就是要将两者进行关联，将hexo生成的文章部署到Github上。


  • 修改hexo配置文件，关联github仓库
    打开站点配置文件 _config.yml，拉到最后的deploy配置项，增加git配置。大家可以直接将YourgithubName替换成你的github账号即可！


deploy:
type: gitrepo: https://github.com/YourgithubName/YourgithubName.github.io.gitbranch: master


  • 安装 hexo-deployer-git ,这样就可以部署到Github了
    npm install hexo-deployer-git --save


  • 发布文章并部署 执行下面三个命令进行文章发布部署


hexocleanhexogeneratehexodeploy


hexo clean 清除了你之前生成的东西，可以不加。

hexo generate 生成静态文章，也可以使用缩写 hexo g
hexo deploy 部署文章，也可以使用缩写 hexo d


注意在deploy时可能要你输入username和password，直接输入即可。


9.png


如果出现上图的效果则说明部署成功，这时候就可以通过浏览器访问并查看你博客效果了。https://jianzh5.github.io


10.png


博客配置


hexo中的大部分配置都是在具体主题中配置，只有些基础配置需要在主配置文件中(_config.yml)配置，比如博客名称、作者、时区等，大家根据情况自行配置，下面是博主的配置


11.png


发布文章


hexo 发布文章很简单，只需要在主目录中执行  hexo n "文章标题" 指令，执行完成后会在 /blog/source/_posts 文件夹下生成对应的md文件，要编辑文章只需要使用用md编辑工具编辑生成的文件即可。


在编写文章的时候可以使用tags标签和categories标签给文章打上标签和分类，方便后期检索。示例如下：


12.png


主题配置


如果你不太喜欢nexo的默认主题，可以更换一个主题。这里我们选择Next作为我们的博客主题，官方地址为：https://github.com/theme-next/hexo-theme-next


  • 下载next主题 在博客目录地址中执行git指令，下载主题


cd/Users/zhangjian/bloggitclonehttps://github.com/theme-next/hexo-theme-next themes/next


下载完成后我们就可以在themes主题文件夹下看到next主题文件夹


13.png


  • 修改主题配置 打开_config.yml，修改theme属性配置，将值设置成next


14.png


  • 重新编译部署


hexoghexod


这样你的博客主题就换成了 next ，可以访问我的博客查看效果：

https://jianzh5.github.io/


配置搜索功能


一般博客都会集成搜搜功能，NexT主题支持集成多种搜索：Local Search 、 Algolia、微搜索等。我使用的是Local Search，大家可以自行选择。


Local Search 的配置步骤如下：


  • 安装插件 hexo-generator-searchdb
    $ npm install hexo-generator-searchdb


  • 修改站点配置文件


search:
path: search.xmlfield: postformat: htmllimit: 1000


path：索引文件的路径，相对于站点根目录

field：搜索范围，默认是 post，还可以选择 page、all，all 表示搜索所有页面limit：限制搜索的条目数


  • 修改主题配置文件


#Localsearch#Dependencies: https://github.com/next-theme/hexo-generator-searchdblocal_search:
enable: true


  • 效果预览


15.png


评论配置

没有评论的博客是没有灵魂的，NexT主题支持多种评论插件，这里我们选择valine作为评论系统，详情大家可以移步至官网 https://leancloud.cn


注册好应用后进入修改博客主题所在目录的配置文件 /next/_config.yml，开启valine并修改你注册的 appid 和 appkey，配置完成后使用 hexo g 和 hexo d 编译发布即可看到效果。


16.png


版权申明


主流网站的文章末尾都有版权申明，原文链接。如下效果为博主在CSDN上的某篇博客的版权申明：


17.png


要在next中配置版权申明很简单，只需要修改主题配置文件 _config.yml 中的 creative_commons 标签配置：


creative_commons:
license: by-sasidebar: truepost: truelanguage: deed.zh


所有协议大家可以在网站 https://creativecommons.org/licenses 中了解，可以根据需求更换协议。


配置完成后重新部署hexo即可，效果如下：


aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliYW5pYVJZNTd2a2dGVWNpYWxiRUxjNTRzb2lidVRlY1hId3VrY3p6MWRFN21MUnRUV2xSRGZGZWRBLzY0MA.png


打赏功能


现在很多博客平台都集成了打赏功能，如果你也想实现此功能可以按照下面操作实现。


  • 准备好微信和支付宝收款二维码 将两张收款二维码图片上传至next主题文件夹下的source/images下，即 /blog/themes/next/source/images


  • 修改主题配置文件，开启赞赏


18.png


  • 重新编译部署


hexoghexod


19.png


  • 在文章明细页查看效果


社交功能


希望给个人博客加上自己在其他平台的链接，可以直接修改主题的配置文件，比如博主给博客加入了博主CSDN、知乎的链接。


20.png


很简单，配置个链接和图标即可，对应的图标大家可以在这个网站找到：https://www.thinkcmf.com/font/font_awesome/icons.html，如果不使用图标不要忘记后面需要跟上 ||，否则编译不成功！


配置标签页面


  • 创建标签页
    在博客主目录执行 hexo new page tags 创建tags页面，页面位于 /blog/source/tags/index.md


  • 编辑标签页，设置页面类型


title: 标签date: 2020-06-1420:57:56type: "tags"comments: false


由于我们之前开启了评论，所有的页面默认都开启了评论功能，而标签页不需要评论，所以需要加上 comments: false 关闭评论。


  • 修改菜单配置，将标签页面加入菜单
menu:
home: /||fafa-hometag: /tags/||fafa-tagsarchives: /archives/||fafa-archive


配置分类页面


  • 创建分类页面
    hexo new page categories，页面位于 /blog/source/categories/index.md


  • 编辑分类页面，设置页面类型


title: 分类date: 2020-06-1420:57:56type: "categories"comments: false


分类页面同样也需要关闭评论。


  • 修改菜单配置，将分类页面加入菜单


menu:
home: /||fafa-hometag: /tags/||fafa-tagscatagories: /catagories||fafa-tharchives: /archives/||fafa-archive


小结


本篇文章带大家使用Hexo加上Github搭建自己的个人博客，博客基本的功能该有的都配置上了，剩下的一些个性化配置就等着大家自己慢慢去挖掘了。


作为程序员（媛）坚持写技术博客是很有好处的，可以大大扩展你的技术体系，而且以“输出倒逼输入”本身就是一个很好的学习方法。有搭建博客的想法就要坚持下去，切莫三天打鱼两天晒网，大家共勉！

文章标签：
JavaScript
Shell
开发工具
搜索推荐
BI
索引
网络安全
git
程序员
飘渺Jam
目录
相关文章
TiMi先生
|
网络安全 开发工具 git
从零开始搭建属于自己的hexo博客
整个搭建过程大概需要30分钟不到，请各位控制自己的时间~
TiMi先生
136 0
带你读小助手
|
Web App开发 域名解析 JavaScript
3分钟搭建个人Hexo博客
从账号的创建到一键部署，手把手教你零基础创建个人博客，后续可以继续根据网上的教程来修改代码对博客进行定制化的美化。
带你读小助手
95 1
YI
|
JavaScript Shell Linux
Hexo博客搭建1
暑假在家学习时，突然感觉学过的知识忘记的很快，所以决定搭建个人博客来记录学习过程。经过前期了解后，决定采用Hexo框架来搭建个人博客。本文将记录博客搭建过程。
YI
98 0
YI
|
Shell
Hexo博客搭建3
之前的文章介绍了博客的本地搭建和线上部署。因为hexo的内置主题不够好看，所以我们可以选择加载其他主题来美化我们的博客页面。本文我将介绍基于hexo框架搭建的博客如何修改主题。
YI
75 0
YI
|
Shell 开发工具 数据安全/隐私保护
Hexo博客搭建2
上一篇介绍了博客的本地环境搭建，但这只能本地访问自己的博客。如果想让自己的博客被互联网上的其他人访问，我们还需要将博客项目进行线上部署。本文我将介绍将博客部署到github上的方法。
YI
68 0
飘渺11
|
JavaScript 搜索推荐 程序员
使用Hexo 搭建你的技术博客
使用Hexo 搭建你的技术博客
飘渺11
248 0
软件测评说
|
缓存
hexo 博客搭建踩坑系列
hexo 博客搭建踩坑系列
软件测评说
71 0
聚优云惠
|
JavaScript 安全 应用服务中间件
如何在服务器上搭建hexo博客
聚优云惠
4476 0
Mancuoj
|
缓存 JavaScript 前端开发
【Hexo】手把手教你搭建属于你自己的博客
【Hexo】手把手教你搭建属于你自己的博客
Mancuoj
165 0
【Hexo】手把手教你搭建属于你自己的博客
是乃德也是Ned
|
JavaScript Shell Linux
使用Hexo搭建自己的博客
之前一直在用typecho来做自己的博客，因为他操作比较简单，但是前几日修改一些配置的时候，看着满屏的php代码实在有些头疼，在朋友的推荐下，我成功的入坑了hexo，下面分享一些自己搭建博客的过程，尽量让读者避开一些坑。
是乃德也是Ned
186 0