目录
基本原理
方法 1 - 本机 Windows 下建站 (力荐)
下载安装 node.JS
用管理员权限打开命令行, 安装 hexo-cli 和 hexo
下载安装 Git
初始化 hexo
使用 hexo generate 生成静态资源
在本地运行 hexo, 看一切是否正常
在 Coding.NET 创建与用户名相同的项目, 并启用代码的 pages 功能
启用通过 Git 将 hexo 部署到远程的功能
使用_config.YAML 来配置 hexo
使用
hexo clean && hexo g && hexo d
发布 hexo 博客
域名绑定
主题使用
方法 2 - Cloud Studio 下建站 (力荐)
在 Coding.NET 创建与用户名相同的项目, 并启用 pages 功能
使用现有项目创建工作区
使用命令行配置环境
_config.YAML 文件的配置, 域名绑定, 主题使用等等
本文介绍对开发小白也毫无压力的 hexo 静态博客建站全攻略, GitHub.io 与 coding.me 的静态博客类似, 3 年前本人基于本机 Windows 在 GitHub.io 上创建了静态 GitHub Pages - yanglr https://yanglr.github.io/ , 本文以在 Coding pages 上建站为例.
基本原理
配置区: 用于 hexo 博客的配置, 成功部署后原 hexo init 产生的目录下会生成一个 public 的文件夹.
发布区:
事实上, 这一部分就是由配置区生成的 public 文件夹中的内容.
发布区的代码必须是公开的, 配置区的代码看需要了, 如果 Git 部署时使用的是 repo: https:// 用户名: 密码 @仓库地址这种方式, 如果也 push 到公开代码的仓库就会泄漏个人密码了, 所以建议配置在自己的电脑上进行, 或使用 SSH key 的形式代替明文密码.
方法 1 - 本机 Windows 下建站 (力荐)
下载安装 node.JS
到官网 https://nodejs.org/en/blog/release/ 下载 Node.JS 的最新 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 官网 https://git-scm.com/ 下载 Git Windows 版, 使用默认设置进行安装即可.
初始化 hexo
比如, 打算在 D:\ 盘进行配置, 若将配置的文件夹取名为 blog, 操作如下:
- $ cd D:\
- $ hexo init blog
文件夹名字任意起, 根据个人需要了.
使用 hexo generate 生成静态资源
存放 hexo 配置的文件夹 blog 创建好之后, 就可以使用 hexo generate 来生成静态资源了, 该命令也可简写为 "hexo g".
在本地运行 hexo, 看一切是否正常
此时可使用 hexo server(简写为 hexo s) 来开启本地 web 服务器查看页面效果, 默认情况下在浏览器中打开
http://localhost:4000
即可看到如下界面:
在 Coding.NET 创建与用户名相同的项目, 并启用代码的 pages 功能
打开网址 https://dev.tencent.com/user/projects/create , 即可创建项目.
由于项目名字与用户名 legege007 一致, 所以我的 coding 静态 pages 的访问地址即为 http://legege007.coding.me/ , 你用同样的方法, 地址会变成你的用户名. 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.YAML 来配置 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 版地址即可.
同时, 你还需要在 coding 项目中加入自己的公钥, 居然方法为:
打开命令行终端输入 SSH-keygen -t rsa -C <your_email@example.com>(你的邮箱), 连续点击 Enter 键即可.
- 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.YAML 配置文件只需要改 deploy 这一处!
使用
hexo clean && hexo g && hexo d
发布 hexo 博客
不出意外的话, 等命令完全跑完就能从静态地址你的用户名. coding.me 看到你的博客内容了.
域名绑定
先去域名管理系统中加一条 CNAME 记录, 比如我的域名是 https://enjoy233.cn/ , 此处想绑定到 https://www.enjoy233.cn/ , 则添加方法如下:
然后在 coding pages 的页面中设置如下:
过几分钟后, 就能通过域名 https://www.enjoy233.cn/ 来访问我的博客了.
主题使用
个人觉得 hexo 主题 Material X https://xaoxuu.com/wiki/material-x/ 还挺不错的, 配置文档为 Material X - Wiki https://xaoxuu.com/wiki/material-x/ ~
就安装试了一下, 首先命令行要做的事情是:
- $ 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.YAML 中的 theme(默认是 landscape) 配置为:
theme: material-x
此时, 再使用 hexo clean && hexo g && hexo d 发布博客, 然后刷新博客就能看到使用主题后的效果了.
方法 2 - Cloud Studio 下建站 (力荐)
此处介绍在 Cloud Studio 中使用两个 branch 建站的方法, master 分支作为发布区, config 分支作为配置区. 如果不另建分支, 千万不要使用 Cloud Studio 的 push 代码的功能, 不然上传的会是配置相关的所有文件 (真个 blog 文件夹, 而不是仅有 public 文件夹下的内容), 会导致博客无法正常使用.
在 Coding.NET 创建与用户名相同的项目, 并启用 pages 功能
打开网址 , 即可进入 Cloud Studio.
我的用户名是 legege007, 于是就建了个 legege007 的项目.
使用现有项目创建工作区
打开网址 , 即可进入 Cloud Studio.
我选择使用了 node.JS 的环境来进行配置, 同时选中项目 legege007, 然后创建即可.
使用命令行配置环境
Cloud studio 中默认是 Linux 系统, 我习惯于用 root 的权限来操作, 免得后面还需要用 chmod 之类的命令来改权限, 一进 IDE 界面, 使用命令 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.YAML 文件的配置, 域名绑定, 主题使用等等
_config.YAML 文件的配置, 域名绑定, 主题使用等等, 基本上与在 Windows 下安装完全一样, 参考 Windows 下同样的操作即可, 就不再赘述了.
安装完主题后的界面是:
另外, 值得一提的是:
Cloud Studio 还有几个优势, 即:
可以迅速切换环境, 比如 hexo,node.JS,.net Core,Ubuntu,Java 等互转, 速度超快的.
可以一键部署, 除了 coding.me 的域名可用以外, 一键部署后, 还提供一个 coding.io 的域名可以访问. 如果暂时没买个人域名, 这就是个大福利了~
如有帮助, 麻烦在右下角 "推荐" 一下, 多谢~
来源: https://www.cnblogs.com/enjoy233/p/10468996.html