开发小白也毫无压力的hexo静态博客建站全攻略 - 躺坑后亲诉心路历程

在

Coding.net

创建与用户名相同的项目，并启用

pages

功能
• 使用现有项目创建工作区
• 使用命令行配置环境

• _config.yml

  文件的配置、域名绑定、主题使用等等

本文介绍对开发小白也毫无压力的hexo静态博客建站全攻略，

github.io

coding.me

Windows

github.io

Coding pages

基本原理

配置区: 用于

hexo

hexo init

public

发布区:
事实上，这一部分就是由配置区生成的

public

发布区的代码必须是公开的，配置区的代码看需要了，如果

git

repo: https://用户名:密码@仓库地址

push

ssh key

方法1 - 本机Windows下建站 (力荐)

下载安装

node.js

到官网下载

nodejs

LTS

用管理员权限打开命令行，安装

hexo-cli

和

hexo

$ npm install hexo-cli -g
$ npm install hexo --save

如果安装速度很慢，可以考虑先换淘宝镜像源:

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

再继续进行安装~

下载安装

git

到Git官网下载Git Windows版，使用默认设置进行安装即可。

初始化

hexo

比如，打算在

D:\

blog

$ cd D:\
$ hexo init blog

文件夹名字任意起，根据个人需要了。

使用

hexo generate

生成静态资源

存放

hexo

blog

hexo generate

在本地运行

hexo

，看一切是否正常

此时可使用

hexo server

hexo s

web

http://localhost:4000

在

Coding.net

创建与用户名相同的项目，并启用代码的

pages

功能

打开网址https://dev.tencent.com/user/projects/create，即可创建项目。
由于项目名字与用户名

legege007

coding

pages

你的用户名.coding.me

blog

blog

coding

pages

你的用户名.coding.me/blog

js、css

这里也亲自淌过坑，最终发现有效的处理办法是:
创建的项目名必须要和用户名一致，创建的项目名必须要和用户名一致，创建的项目名必须要和用户名一致，强调三连~

启用通过

git

将

hexo

部署到远程的功能

完成此项工作，需要先安装

hexo-deployer-git

$ npm install hexo-deployer-git --save

安装途中可能会遇到问题:

"npm WARN babel-eslint@10.0.1 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself. "

$ npm install lodash
$ npm install eslint@^4.12.0

使用

_config.yml

来配置

hexo

一开始，我们只需要修改

deloy

deploy:
type: git  #上传类型 选择git
repo: https://legege007:yl15826911621@git.dev.tencent.com/legege007/legege007.git  # 执行 git remote -v 可以获得
branch: master  # 部署到 Master分支
#message: update blog # 每次提交的信息 不填默认为当前时间

只需要将

repo

ssh

公钥

ssh-keygen -t rsa -C <your_email@example.com>

Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]
// 此处推荐使用默认地址，也可在密钥后面加后缀,即输入"id_rsa_coding"

找到刚才生成的

id_rsa_coding.pub

Coding

git

_config.yml

deploy

使用

hexo clean && hexo g && hexo d

发布

hexo

博客

不出意外的话，等命令完全跑完就能从静态地址

你的用户名.coding.me

域名绑定

先去域名管理系统中加一条

CNAME

将

_config.yml

url

http://yousite.com

url: //www.enjoy233.cn
root: /

然后在

coding pages

主题使用

个人觉得

hexo

$ cd blog
$ git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-x

$ npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content hexo-recommended-posts

然后将

_config.yml

theme

landscape

theme: material-x

此时，再使用

hexo clean && hexo g && hexo d

方法2 - Cloud Studio下建站 (力荐)

此处介绍在

Cloud Studio

branch

master

config

push

blog

public

在

Coding.net

创建与用户名相同的项目，并启用

pages

功能

打开网址 https://dev.tencent.com/user/projects/create, 开始创建项目。

我的用户名是

legege007

legege007

使用现有项目创建工作区

打开网址 https://studio.dev.tencent.com/dashboard/workspace/create, 即可进入Cloud Studio。
我选择使用了

node.js

legege007

创建

使用命令行配置环境

Cloud studio中默认是

Linux

chmod

sudo su

$ sudo su

然后新建

config

$ git checkout -b config

其他相关命令使用过程具体如下:

➜  workspace git:(master) sudo su
root@coding:/home/coding/workspace# git checkout -b config

root@coding:/home/coding/workspace# git checkout -b config
Switched to a new branch 'config'

root@coding:/home/coding/workspace# hexo init blog

root@coding:/home/coding/workspace# cd blog/
root@coding:/home/coding/workspace/blog# hexo g

root@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d

root@coding:/home/coding/workspace/blog# npm install hexo-deployer-git --save

root@coding:/home/coding/workspace/blog# npm audit fix

root@coding:/home/coding/workspace/blog# npm install lodash

root@coding:/home/coding/workspace/blog# npm install eslint@^4.12.0

root@coding:/home/coding/workspace/blog# npm install hexo-deployer-git --save

root@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d

root@coding:/home/coding/workspace/blog# ssh-keygen -t rsa -C "legege007@yeah.net"
root@coding:/home/coding/workspace# cd ~/.ssh
root@coding:~/.ssh# ls
id_rsa  id_rsa.pub  known_hosts
root@coding:~/.ssh# vim id_rsa.pub

root@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d

上述命令和在

windows

_config.yml

文件的配置、域名绑定、主题使用等等

_config.yml

Windows

安装完主题后的界面是:

另外，值得一提的是:
Cloud Studio还有几个优势，即:

• 可以迅速切换环境，比如

  hexo

  、

  node.js

  、

  .net Core

  、

  Ubuntu

  、

  Java

  等互转，速度超快的。
• 可以一键部署，除了

  coding.me

  的域名可用以外，一键部署后，还提供一个

  coding.io

  的域名可以访问。如果暂时没买个人域名，这就是个大福利了~

如有帮助，麻烦在右下角"推荐"一下，多谢~