Hexo+github个人博客搭建与内容更新

hexo官方文档

1.安装

安装前提：

Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)

git

如果电脑已安装上述必备程序，可以直接前往安装hexo步骤。

如果您的电脑中尚未安装所需的程序，请先完成安装。

(1) 安装之前，先在 GitHub 上建立一个仓库，如下图。

Tips：githun仓库权限必须设置为公开。

(2) 接下来就是安装Hexo

首先在本地建立一个文件夹 blogs，点开 blog 文件夹，鼠标右键打开【Git Bush Here】，输入npm命令安装Hexo：

npm install -g hexo-cli
hexo version    # hexo版本号，查看是否安装成功

2.建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件，指定的文件夹一定是空文件夹，否则会报错。

$ hexo init <folder>
$ cd <folder>
$ npm install

执行完成命令后，在文件夹内生成的目录如下。（具体说明查看官方文档.）

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

3.配置

博客的网站标题、网站副标题、名字、网站使用的语言以及网站时区都可以在 _config.yml 进行配置。查看官方文档，了解具体说明。

title: Debug World
subtitle: 世界很大，我想盘它
description: 
keywords: 
author: 
language: zh-CN
timezone:

4.生成

hexo generate    # 把源文件生成静态文件。等同 hexo g
hexo server      # 启动本地服务器。等同 hexo s

用浏览器打开 http://localhost:4000/ 出现Hexo默认博文，就说明成功了。

5.部署

(1)打开 _config_yml 文件夹，下滑底部找到 deploy，进行修改

deploy:
 type: git
 repo: https://github.com/lixiaoyan999/lixiaoyan999.github.io.git			#git仓库地址
 branch: master

(2)安装Git部署插件，命令

npm install hexo-deployer-git --save

(3)把静态网页推送到github

hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

(4)完成之后，打开浏览器，输入 http://xxx.github.io 就可以打开你的网页。

6.更改主题

这里使用的是 Hingle 主题。

(1)打开blogs文件夹,输入代码后自动下载主题至blogs/themes中。

git bash:
git clone https://github.com/Dreamer-Paul/Hingle.git

(2)配置站点文件(themes/hingle/_config.yml)，修改主题（注意冒号之后都要有空格）。

author: 'Paul' # 作者名称
author_avatar: 'https://sdn.geekzu.org/avatar/d22eb460ecab37fcd7205e6a3c55c228?s=200&r=X&d=' # 作者头像
author_text: '特立独行的一只前端菜狗。本站未注明转载的文章均为原创，并采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="nofollow">CC BY-NC-SA 4.0</a> 授权协议，<span style="color: #E91E63">转载请注明来源</span>，谢谢！如本站内容对你有所帮助的话，不妨 <a href="https://paul.ren/donate">捐助支持</a> 一下？同时欢迎订阅关注 <a href="https://paul.ren/note" target="_blank">我的日记</a>，唠嗑（分享）每日的折腾经历。' # 作者信息
social: # 社交链接
  - title: '微博'
    icon: 'weibo'
    link: 'http://weibo.com/234891753'
  - title: 'Github'
    icon: 'github'
    link: 'https://github.com/Dreamer-Paul'
  - title: '首页'
    icon: 'home'
    link: 'https://paul.ren'
background: 'https://api.paugram.com/wallpaper?source=gh' # 主题背景
menu: # 页眉菜单项目
  '关于我': /about
  '朋友们': /friends
config:
  copyright: true # 复制的时候弹出保留原站链接说明
  night: true # 自动切换夜间模式

(3) 启用主题。打开根_config.yml配置文件，找到theme字段，将其值改为hingle(先确认主题文件夹名称是否为hingle)。

根_config.yml_config.yml
theme: hingle

7.内容更新与维护

通过 typora撰写编辑文档来进行内容的更新，通过git进行远程的拉取和维护。

7.1新建博文

(1)执行命令创建新文章或新的页面。新建完成后source/_posts目录中会生成一个文件 “title.md”，即新建的博文。

hexo new "title"

(2)直接进入source/_posts，鼠标右键选择新建文件，重命名博文。

7.2更新与发布博文

执行下面几条命令，将博客部署到 GitHub 上：

hexo clean ==  hexo c   # 清除缓存  
hexo generate == hexo g  # 生成静态文件
hexo deploy == hexo d    # 部署到github中，更新网页端的内容

组合命令

hexo d -g

tips:

已发布的文章发生修改，本地可直接预览，即不执行上述3个命令,刷新浏览器即可;

远程部署必须要执行上述命令

修改内容一旦预览与修改不一致，则需要clean

一叶知秋