使用 hexo+melody 主题搭建个人博客

最新推荐文章于 2024-03-25 09:41:06 发布

wmouren

最新推荐文章于 2024-03-25 09:41:06 发布

阅读量2.4k

点赞数 5

分类专栏： hexo 文章标签： hexo 博客主题

本文链接：https://blog.csdn.net/weixin_38378684/article/details/92830472

版权

hexo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

本文介绍的是使用 GitHub Pages + Hexo 博客框架 + Melody 主题搭建个人博客，由于是第一次写博客如果文章中有什么不足请多见谅。

使用 GitHub Pages 当服务的好处

免费方便，不需要自己购买服务器之类
静态文件访问速度也比较快

Hexo 简介

Hexo 是一个快速、简洁且高效的博客框架，支持 Markdown，一键部署只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站，有丰富的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。

Hexo 官网

Hexo GitHub

准备工作

本文的环境为：

Windows 10
node.js # version v10.7.0
git # version 2.16.1

请确保已经安装了 node 和 git 并了解其相关的基础知识，以及拥有自己的 GitHub 账号。

注意：很多命令既可以使用 windows 的cmd命令行来完成，也可以使用刚才安装好的 Git Bash 来完成，但是部分命令会有一些问题，建议大家全部使用 Git Bash 来执行命令。

使用 Hexo 写博客

安装 Hexo

使用 npm 安装时会发现特别的慢，所以我们可以使用淘宝的cnpm来替代 npm 命令。
桌面右键打开 Git Bash 输入以下命令：

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

安装完成后会有提示，然后我们开始使用 cnpm 来安装 hexo

继续输入以下命令：

$ cnpm install -g hexo-cli

初始化

新建一个文件夹（名字可以随便取），比如我的是 D:\blog，由于这个文件夹将来就作为你存放代码的地方，所以最好不要随便放。

进到你新建的文件夹下

$ cd /d/blog
$ hexo init

hexo 会下载一些文件在这个目录，如下图：
在这里插入图片描述

Hexo 目录结构介绍

_config.yml

全局配置文件，网站的很多信息都在这里配置，诸如网站名称，副标题，描述，作者，语言，主题，部署等等参数。这个文件下面会做较为详细的介绍。

scaffolds

scaffolds 是“脚手架、骨架”的意思，当你新建一篇文章（hexo new ‘title’）的时候，hexo 是根据这个目录下的文件进行构建的。基本不用关心。

source

这个目录很重要，新建的文章都是在保存在这个目录下的.

_posts 目录下是一个个 markdown 文件。你应该可以看到一个 hello-world.md 的文件，文章就在这个文件中编辑。

_posts 目录下的 md 文件，会被编译成 html 文件，放到 public （此文件现在应该没有，因为你还没有编译过）文件夹下。

themes

网站主题目录，hexo 有非常好的主题拓展，支持的主题也很丰富。该目录下，每一个子目录就是一个主题

更多目录介绍请点击这里

接着输入以下命令：

$ hexo g # 生成静态页html文件  会放到public文件夹下
$ hexo s # 启动服务 默认端口是 4000

然后我们打开浏览器，输入 http://localhost:4000/ ，会惊奇的发现已经完成了！ Hexo 自带的主题模板确实比较丑，后面会告诉大家如何更换主题。

在这里插入图片描述

修改主题

默认主题很丑，我想大家应该喜欢比较漂亮的主题，所以我们先修改主题。可以去官方主题选择自己喜欢的。

我的博客使用的主题是: hexo-theme-melody, hexo-theme-melody 的官方文档

注意:所有的主题都放在 themes 目录下

首先下载 hexo-theme-melody 主题：

$ git clone https://github.com/Molunerfinn/hexo-theme-melody.git themes/melody
$ npm install hexo-renderer-jade hexo-renderer-stylus

下载后的主题目录：

在这里插入图片描述
接着修改 hexo 根目录下的 _config.yml 中的 theme: landscape 改为 theme: melody 然后重新执行hexo g来重新生成。

如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布。

更换完后的效果:
在这里插入图片描述
是不是比自带的主题好看很多!

上传 GitHub

创建仓库

新建一个仓库名称必须为 你github的用户名.github.io ,比如，如果你的 github 用户名称是 demo ，那么就新建一个名为 demo.github.io 的仓库（必须是自己的用户名，其他名称是无效的），博客搭建完成以后你的访问地址就是 https://demo.github.io ，是不是很方便。

注意的地方：

注册的邮箱一定要验证，否则不会成功；
仓库名字必须是：username.github.io，其中username是你的用户名；
仓库创建成功不会立即生效，需要过一段时间，大概10-30分钟。

配置 SSH key

为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

用git bash执行如下命令：

$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示：No such file or directory 说明你是第一次使用git。

$ ssh-keygen -t rsa -C "邮箱地址"

一直回车，最终会生成一个文件在用户目录下，打开用户目录，找到 .ssh\id_rsa.pub 文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：
在这里插入图片描述
将刚复制的内容粘贴到key那里，title随便填，保存。
此时还需要配置：

$ git config --global user.name "wmouren"// 你的github用户名，非昵称
$ git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

配置 _config.yml

如果以上都配置好了，上传就很容易了，一句 hexo d就可以搞定。
首先确定 ssh key配置好。
然后是 _config.yml 中的 deploy 的部分，打开 hexo 根目录下的 _config.yml 文件,找到 deploy属性:

# 注意 key: value 冒号后面需要有一个空格
deploy:
  type: git
  repository: git@github.com:wmouren/wmouren.github.io.git
  branch: master

配置完成后还需要安装一个插件:

$ cnpm install hexo-deployer-git --save

更多部署方式请参考官方文档 Deployment | Hexo

上传到 GitHub

到了最后一步，进入 hexo 根目录打开你的 git bash，输入hexo d就会将代码全部提交，没有改动的不会，hexo 会把所有 md 文件都转换成 html 生成到 public 文件夹中：

$ hexo d # 部署到 github