个人博客搭建 - Hexo+Github

最新推荐文章于 2023-05-11 00:57:14 发布

Draculi

最新推荐文章于 2023-05-11 00:57:14 发布

阅读量216

点赞数

分类专栏： Web 文章标签： hexo

本文链接：https://blog.csdn.net/weixin_43242991/article/details/113829490

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Hexo框架和Github搭建个人博客，包括Node.js安装、Hexo框架配置、博客部署到Github以及如何通过SSH密钥链接、评论系统和自定义域名等进行优化。步骤清晰，适合技术爱好者低成本搭建自己的博客平台。

摘要由CSDN通过智能技术生成

前言:为啥选择Hexo + Github?

搭建自己的个人博客的念头已经有很长时间了(有没有用先放一边，主要是帅😈)，今天碰巧白嫖了一个阿里云服务器，便想把这个念头辅助实践，个人博客 + 个人服务器，美滋滋~😄可是真搭起来才发现问题不少

白嫖的服务器响应时间慢，加配置，续费是一笔不小的开销
域名麻烦，一年又要花近百元
找不到合适的主题，用着不顺手。。。。。

作为一个白嫖党，花这么多钱装逼，实在是不和我心意，遂将目光投向了hexo + github 的方案，其有以下优点

hexo是静态博客响应快
托管在github仓库中，无开销，不操心
最最重要的一点可以通过"github用户名.github.io"作为域名去访问，凸显了它是一个技术博客且足够酷

定好了方案，下面就开始搭建了💦

具体部署流程

nodejs下载与安装

nodejs下载地址

选择左边的LTS版(长期支持版)下载

下载完成后一路下一步就行了，完成后打开cmd输入以下命令，看看是否安装成功

node -v  #查看版本
npm -v

出现版本号及成功✌️

Hexo框架安装

1.更换镜像源，安装cnpm

npm install -g cnpm --registry==https://registry.npm.taobao.org

输入cnpm，出现自动补全即安装成功

2.安装hexo

cnpm install -g hexo-cli

下载完成后,hexo -v验证下

搭建博客

1.建立博客根目录，之后所以操作均在该目录下，如果失败删掉重来即可

2.初始化

hexo init

生成一系列文件夹

3.启动

hexo s

通过4000端口访问，用来调试和预览

4.常用hexo命令

hexo g		//根据 source，更新 public
hexo d		//根据 public，更新 .deploy_git
hexo clean		//对hexo g生成的文件进行清理

source：资源文件夹。用来存放图片、Markdown 文档（文章、草稿）、各种页面（分类、关于页面等）。
public：将 source 文件夹里的 Markdown 文档，转换成 index.html。再结合主题进行渲染，就是我们最终看到的博客。
.deploy_git：将 public 文件夹的内容提交到 Github 后生成，内容与 public 文件夹基本一致。

部署到Github

1.建立空仓库，仓库名为’username of github’.github.io

2.在博客根目录下安装git插件

cnpm install --save hexo-deployer-git

3.配置_config.yml，如下图所示

4.hexo g + hexo d推到远端，就可使用域名’username of github’.github.io访问了

一些折腾

经过上述操作，我们已经得到了一个基础的博客，下面我们来进行一些改进🌝

使用密钥链接github

我们会发现每次deploy都需要输入密码连接github，这是非常不方便的。我们可以通过配置SSH Key来实现免密登录

1.下载git工具并安装

2.打开Git Bash，执行下列命令，生成公钥与私钥

ssh-keygen -t rsa -b 4096 -C "your_github_email@example.com"

密码输入完成后，提示生成成功，并显示密钥指纹信息；此时在前面指定的目录下会看到有两个新的文件：id_rsa.pub/id_rsa

3.添加密钥到 ssh-agent

打开Git Bash，输入下列命令，启动ssh-agent

eval `ssh-agent -s`

将密钥添加到 ssh-agent

ssh-add ~/.ssh/id_rsa

4.添加密钥到 Git 仓库使用的账号

登陆 GitHub，点击右上角头像，依次进入 Settings->SSH And GPD Keys，点击 Add SSH key，在 Title 中输入密钥描述信息，在 Key 中输入刚才生成的公钥id_rsa.pub，点击 Add key，添加公钥

5.连接验证

打开Git Bash，输入下列命令

ssh -T git@github.com

成功✌️

建立评论系统

经过多次尝试后，笔者使用基于 leancloud 的无后端评论系统：Valine来搭建自己评论系统，他支持markdown，也没有啥稀奇古怪的问题😫

1.注册leancloud并创建一个应用，这里推荐国际版，记住自己的AppID和Appkey

2.在themes\yilia-plus\layout\_partial\post目录下，新建valine.ejs文件，写进如下代码

<% if ((theme.valine.type === 2 || (theme.valine.type === 1 && post.comments)) && !index && theme.valine.enable){ %>
	<div id="valine-container" style="margin: 0 30px ; background-color: #fff;" ></div>
	<!--Leancloud 操作库:-->
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <!--Valine 的核心代码库-->
    <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
	<script>
		var notify = '<%= theme.valine.notify %>' == true ? true : false;
        var verify = '<%= theme.valine.verify %>' == true ? true : false;
        new Valine({
            av: AV,
            el: '#valine-container',
            emoticon_url: 'https://cloud.panjunwen.com/alu',
            emoticon_list: ["狂汗.png","不说话.png","汗.png","坐等.png","献花.png","不高兴.png","中刀.png","害羞.png","皱眉.png","小眼睛.png","暗地观察.png"],
            app_id: '<%= theme.valine.appid %>',
            app_key: '<%= theme.valine.appkey %>',
            placeholder: '<%= theme.valine.placeholder %>'
            });
	</script>
<% } %>

3.修改主题配置文件，打开文件themes\yilia-plus\_config.yml，修改配置

#6.valine 评论系统，到leancloud进行注册
# https://leancloud.app/
valine:
  enable: true
  appid: 'Syt4D2WNGDoanRDjFItYm7zm-MdYXbMMI'  # Leancloud应用的appId
  appkey: '7Vpz2nYCUjecmNGnpVnGrbyY'          # Leancloud应用的appKey
  verify: true      # 验证码
  notify: true       # 评论回复提醒
  avatar: mp        # 评论列表头像样式（https://valine.js.org/avatar）
  placeholder: ヾﾉ≧∀≦)o来啊，快活啊! # 评论框占位符
  type: 1 # -1需要再文章md开头加入comments:true - 2全开评论
  pageSize: 10

与valine.ejs中的配置项一一对应

4.打开 themes\yilia-plus\layout\_partial\article.ejs 文件，添加

<% if (theme.valine.enable){ %>
  <%- partial('post/valine', {
    key: post.slug,
    title: post.title,
    url: config.url+url_for(post.path)
  }) %>
<% } %>