使用Hexo搭建个人博客

最新推荐文章于 2024-06-22 09:45:37 发布

Jarvi-W

最新推荐文章于 2024-06-22 09:45:37 发布

阅读量723

点赞数 1

分类专栏：博客网站文章标签： node.js 博客

本文链接：https://blog.csdn.net/Ace_15/article/details/79255203

版权

博客网站专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文将利用Hexo和GitHub搭建个人博客，预览效果可以查看我的个人博客Jarvis’s Blog

Hexo入门

安装Node.js和npm

前往Node.js官网下载并安装Node.js。新版的Node.js已经集成了npm。在命令行中检测安装：

> node -v
v6.10.1
> npm -v
3.10.10

安装Hexo

使用npm安装Hexo：

> npm install -g hexo-cli

初始化博客

在你准备存放博客本地文件的目录下，输入：

> hexo init blog

在当前目录下，会新建一个blog文件夹，即你的博客在本地所有资源的根目录。

之后，进入到根目录下，创建你的第一篇博客：

> cd blog
> hexo new my-firts-post

利用Hexo生成静态文件：

> hexo g

启动本地服务器查看博客：

> hexo s

默认下访问网址为http://localhost:4000/。在浏览器输入后就可以看到整个博客的雏形了。

更多关于Hexo的命令可以查看Hexo官方文档。

Hexo工作原理

new命令默认格式为：

> hexo new [layout] <title>

默认情况下layout为post，会在/blog/source/_posts/下生成Markdown文件title.md，通过编辑这个文件来编辑自己的博客文章内容。

编辑完成后，使用命令generate（即hexo g），Hexo会根据配置文件，生成博客网址中的所有静态内容（.html文件等），生成的所有静态文件存放在/blog/public/中。可以使用

> hexo clean

来清除缓存文件和已经生成的静态文件。

部署博客

假设你已经完成了博客上的所有内容，想要将它部署到web服务器上。下面以github.io为例。

你需要：

GitHub账户
创建USERNAME.github.io仓库，USERNAME为你的Github用户名。
本地安装Git并关联账户。

以上步骤不做描述，可以参考github入门到上传本地项目。

下面开始将博客部署到Github服务器上。

修改/blog/_config.yml文件，即站点配置文件，将最后的Deployment部分修改为：

deploy: 
  type: git
  repo: https://github.com/USERNAME/USERNAME.github.io.git
  branch: master

repo即之前创建的仓库，branch可以修改为别的分支。以上修改内容会影响hexo d命令（即部署命令）的行为。

安装Git部署插件：

> npm install hexo-deployer-git --save

之后输入命令部署博客：

> hexo clean
> hexo g
> hexo d

此时，你的博客已经完成自动部署，浏览器输入USERNAME.github.io就可以真正在网络上访问你的博客了。

域名绑定

想要使用自己的个性化域名来代替USERNAME.github.io，需要完成域名绑定。国内主流的代理厂商有阿里云和腾讯云等，具体操作官网文档有详细说明。

Hexo进阶

一个简易的博客已经搭建好了，以下说明如何添加更多个性化的设置以及丰富自己的博客。

设置主题

网上有大量开源的Hexo主题，直接在Github搜索”hexo-theme”就能找到很多不错的主题。下面以NexT为例，更换主题。

安装NexT，在/blog/目录下输入：

> git clone https://github.com/iissnan/hexo-theme-next themes/next

主题的所有资源文件保存在/blog/themes中，例如上面的命令就会得到/next/目录。

打开站点配置文件/blog/_config.yml，将theme:内容修改为next。

打开主题配置文件/blog/themes/next/_config.yml，可修改scheme:内容

，NexT默认提供了四种scheme。

修改完成后，重新执行：

> hexo clean
> hexo g

完成修改，之后可以选择运行本地服务器（hexo s）或者直接部署（hexo d）来查看效果。

个人信息与社交链接

主页上的个人信息在站点配置文件中修改。即Site部分。

社交链接在主题配置文件中修改。在/blog/themes/next/_config.yml中找到”Social Links”，在下方设置，文件注释中就有详细的说明。

添加评论系统

NexT主题提供多种评论系统的支持，例如Disqus，Hypercomments等，此处以Gitment为例，为博客文章增加评论系统。

Gitment是作者实现的一款基于 GitHub Issues 的评论系统。支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。只能使用GitHub账号进行评论。详细配置过程可以参考hexo 博客next主题集成gitment或者gitalk评论系统。

同时，如果想要使用其它评论系统，在主题配置文件中，每一个支持的评论系统上方的注释，都会包含该系统的主页，进入主页即可了解每个系统的配置方式。

添加打分系统

使用widgetpack，登录官网widgetpack.com注册并获取ID，之后填写在主题配置文件的以下部分：

rating:
  enable: true
  id:     YOURID
  color:  fc6423

注意，ID部分只包含数字。

添加转发功能

使用needmoreshare2，NexT直接提供插件支持，并提供官方使用说明。

首先，在themes/next中安装依赖：

> git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton

之后修改主题配置文件：

...
needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

更多自定义选项可以参考主题配置文件中的相关注释。postbottom部分为每篇文章的转发选项，而float部分为博客主页的转发浮动图标。可以修改的选项包括按钮风格，位置，以及社交图标。