GitHub+Hexo博客搭建_github+hexo搭建博客-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41978699/article/details/126261808

本文主要分为三部分，安装前准备，Hexo配置以及关联GitHub。简单说明一下，安装前准备就是博客需要的一些配置，Hexo是静态博客托管平台，我们在本地可以编辑博客，更换主题等。本地更改之后网站是没法变化的（因为就是在本地编辑的，不是编辑的网站），我们需要将与本地博客相关联的那个仓库更新，然后网页的那个博客才能更新

安装前准备

GitHub账号
安装Git
安装nodejs
安装hexo

GitHub账号

在GitHub官网申请账号，并新建一个和自己名字相同的github.io仓库，比如我这里叫harrytea，就新建一个名为harrytea.github.io的仓库。仓库主要用来存储自己的博客文件

安装Git

这个大家自行搜索安装即可

安装nodejs

hexo是基于nodejs写的，这里安装nodejs，官方网站

sudo apt-get install nodejs
sudo apt-get install npm

安装完后运行下面命令检查是否安装成功node -v npm -v

安装hexo

hexo是个人博客网站的框架，可以创建文章，修改主题等，官方网站

npm install hexo-cli -g

这个命令可能会报错，如果报错根据错误提示命令改为sudo npm install hexo-cli --location=global，然后输入hexo -v检查是否安装成功

Hexo配置

本地基本设置

在本地创建一个叫做blog文件夹（其他名字也可以），并用hexo初始化此文件夹

hexo init hexo-blog
cd hexo-blog
npm install

安装完后启动hexo，查看当前网页主题

hexo g
hexo server

此时会打开http://localhost:4000网页，你就能看到你本地的网页了（注意只是本地网页的效果）

更换主题

配置完hexo之后，我们需要更换主题，有很多主题的选择，官网主题，这里介绍两个主题的使用NexT以及Fluid

主题安装

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

主题使用

打开hexo-blog的_config.yml文件进行配置theme:next

启动主题

hexo g -d
hexo s

Fluid

主题安装

主题网站: 安装方法

官网给了两种安装方法，命令行安装和手动安装，这里将手动安装方法copy了过来

下载最新release版本解压到themes目录，并将解压出的文件重命名为fluid

指定主题

修改hexo博客目录中的_config.yml

theme: fluid # 指定主题
language: zh-CN # 指定语言，会影响主题显示的语言，按需修改

创建「关于页」

首次使用主题的「关于页」需要手动创建

hexo new page about

创建成功后，编辑博客目录下/source/about/index.md，添加layout属性

修改后的文件示例如下:

---
title: about
layout: about
---

这里写关于页的正文，支持Markdown，HTML

启动主题

hexo g -d
hexo s

编写自己的文章

继续上面的fluid主题，修改hexo博客目录中的_coonfig.yml，这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件

post_assert_folder: true

例如创建一篇文章名为test

hexo new post test

然后进入到source/_post目录下找相应的md和test文件夹即可，md写内容，test文件夹放图片

下面演示三种图片引用方式: 官方推荐方式，markdown语法以及第三种，第三种和前两种的图片存放方式不同，图片是在/source/images目录下，并且在md文件中无法显示，在页面上可以正常显示，图片引用参考

{% asset_img test.png 图片引用方法一 %}

![图片引用方法二](test.png)

![图片引用方法三](/images/test.png)

主题启动

hexo g -d
hexo s

个性化页面展示

浏览器Tab名称

修改_config.yml的title字段

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

博客标题

修改themes\fluid下_config.yml的blog_title字段

主页正中间的文字

主题目录themes\fluid下_config.yml的text字段

添加阅读量统计

注册leancloud账号并实名认证等

然后在应用选项处点击创建应用，选择开发版，在设置-应用凭证处找到AppID和AppKey记录下来以后使用

修改fluid设置

在themes\fluid下的_config.yml文件下修改下面配置

web_analytics:
  enable: true # 改为true
  
  leancloud:
    app_id: xxx # 把刚才的appid复制过来
    app_key: xxx # 把刚才的appkey复制过来
    
    views:
      enable: true
      source: "leancloud" # 改为leancloud

修改网站底部的PV UV统计数

  statistics:
    enable: true
    source: "leancloud"
    pv_format: "总访问量 {} 次"
    uv_format: "总访客数 {} 人"

添加评论

修改themes\fluid下的_config.yml文件

  comments:
    enable: true
    type: valine

配置leancloud的appid和appkey

valine:
  appId: xxx
  appKey: xxx

发布到GitHub Pages

部署

下面用netlify部署

首先在GitHub上创建一个仓库，随后复制刚才的GitHub地址，进入到本地的blog根目录，将二者关联起来

# https://github.com/name/your-Repository.git
git init
git remote add origin https://github.com/name/your-Repository.git

然后在.gitignore中写我们不想推送的文件

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
themes/
_multiconfig.yml

之后推送即可，然后在hexo的_config.yml中找到deploy项，并添加分支run-page

deploy:
  type: git
  repository: git@github.com:name/your-Repository.git
  branch: run-page

退出重新执行一下

hexo clean # 清理各种缓存和旧文件
hexo g # 生成静态文件
# 同步到github的run-page分支
hexo d # 部署应用

# 出现如下错误
# $ ERROR Deployer not found: git
# 安装依赖解决错误
npm install hexo-deployer-git --save
hexo d # 重新部署

此时进入github，你的仓库就会多出一个分支run-page

托管到netlify

这一步是最关键的，首先进入到netlify官网注册一下账号