Hexo搭建自己的博客

2019-06-12

什么是 Hexo？
Hexo主题
Hexo文章编写
Hexo github 博客
Hexo 添加评论

什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

工具准备（mac）

Node.js (Should be at least nodejs 6.9)

upload successful

1.安装hexo

1	$ npm install -g hexo-cli

如果安装不成功
upload successful

2.创建一个文件夹用于初始化hexo

mkdir /blog
cd /blog
hexo init
npm install

新建完成后，指定文件夹的目录如下：

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


node_modules  npm 文件缓存目录
scaffolds     文夹件下存放的是文章、页面模版
scource       文夹件下存放的是我们的资源文件
themes        文件下存放的是我们的主题文件
.gitignore    git 忽略文件，设置提交文件时，哪些文件不提交
_config.yml   站点配置文件
package.json  站点版本，站点依赖文件
yarn.lock     yarn.lock 文件由 Yarn 自动创建，并且完全通过 Yarn 进行操作。

3.生成静态文件。

1	hexo generate（hexo g）

4.启动

1 2	hexo server（hexo s） hexo s -p 5000 指定端口

默认端口4000，好的这个时候让我们来看看效果
访问地址：http://localhost:4000

upload successful

嗯…丑哭

upload successful

至此搭建的步骤已经完成了，后面找个好看的主题美化一下

hexo 常用命令

$ hexo generate (hexo g) 生成静态文件
$ hexo server (hexo s) 启动本地服务
$ hexo deploy (hexo d) 提交到远程仓库
$ hexo new page "xx"(hexo n page) 创建页面 
$ hexo new "xx" (hexo n "") 创建文章
$ hexo d -g 生成静态并提交到远程仓库
$ hexo s -g 生成静态文件并启动本地预览
$ hexo clean 清除本地 public 文件

Hexo主题

找到你喜欢的主题

upload successful

打开的是一个github的地址，把这个下载到/blog 下面的themes文件夹里

1	git clone ....

然后修改/blog下面的_config.yml,修改主题为下载的文件夹名

1	theme: hexo-theme-typescript

然后还需要下载一下依赖,挨个安装哦
upload successful

1	npm install xxx

安装好了以后hexo s启动

upload successful

哇哦～
upload successful

Hexo文章编写

安装admin插件

1	npm install --save hexo-admin

再次启动项目

访问：http://localhost:4000/admin

1.先新建一个文章

1	hexo new a (a是你的文章文件名)

然后刷新admin页面，点进去编辑就可以了，图片直接粘贴也没问题的

Hexo github 博客

1.安装插件

1	$ npm install hexo-deployer-git --save

在你的github新建公开仓库，名称为：你的登录名.github.io(必须)

新建之后复制地址，记得要复制ssh的地址，不要https的

2.修改配置_config.yml

deploy:
  type: git
  repo: 你自己的项目地址
  branch: master

3.将目录下面的public文件夹提交到git

hexo d

4.大功告成

upload successful

Hexo 添加评论

leancloud

先去注册个号，然后创建应用，在设置里复制Appid和Appkey

修改theme文件下你下载的主题的配置

valine:
  enable: true # !!if you want use valine comment system,please set enable: true
  appId: 你的appid
  appKey: 你的appKey
  guest_info: nick,mail,link #valine comment header info
  placeholder: 说点啥在走啊 # valine comment input placeholder(like: Please leave your footprints )
  avatar: mm # gravatar style https://valine.js.org/avatar
  pageSize: 10 # comment list page size
  verify: false # valine verify code (true/false)
  notify: false # valine mail notify (true/false)
  lang: zh-cn

到底为止吧….
upload successful

安装的过程中可能会有各种问题，环境和系统不同导致的吧，如果启动的过程中有什么迷之bug，可以hexo clean ，然后hexo g试试。。。

没了。。。

upload successful