[Node]Hexo(next主题)+Coding搭建个人博客

[Node]Hexo(next主题)+Coding搭建个人博客

@Author GQ 2017年09月18日  

突然想搭建一个个人网站,想想需要
买域名
买服务器
搭建后台
写前端
...

发现Hexo这么个东西,厉害了! 

1.使用hexo一键生成博客项目
2.使用码云Coding当做服务端

首先了解一下什么是 Hexo 中文官网

我就知道你懒得看...

简单来说Hexo是:

一款支持MarkDown的静态页面在线笔记本

• 作为一个搞IT的,没个自己的网站你说出去拿什么吹牛逼

开始

1. 安装node 和 Git

• 答案:略. (不会的请自行百度)

2. 使用npm安装hexo

$ npm install -g hexo  

• -g 表示全局

这里我安装的时候报错如下

binding.rename...permission denined 
//大概意思是文件写入没权限还或错误的问题

• sudo 还是没解决,百度查资料发现解决办法

npm config set user 0
npm config set unsafe-perm true

• 等待安装完成后 hexo -v查看版本确保安装成功

3.新建一个目录比如myblog 并在目录下操作

$ hexo init

• 等待生成

• 自动生成目录结构

4.运行hexo命令

$ hexo g 
$ hexo s 

g 代表 generate 生成静态文件使用

s 代表server 启动命令

• 再记住两个命令就够了

hexo clean 清除缓存 (怎么改代码都不显示的时候试试这个)

hexo d 代表 deploy 发布代码使用

• 运行hexo s 后即可看到博客页面了,在浏览器输入 localhost:4000

5. 默认主题肯定看起来不爽

• 来官网欣赏下 别人的主题 ,随便看看就行了

• 我精挑细选后,确定使用 next 主题,查看我的demo预览http://madaigou.oschina.io/gqblog/

• 简单布置了一下,具体样式可以美化

6.下载next主题

//在blog文件夹目录下
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

Next官方文档

在_config.yml 文件中搜索theme 将主题改为 theme: next

• 然后再次启动hexo

hexo s --debug

debug 调试打印信息方便看还是加上吧

• 再次访问 localhost:4000 查看 next 主题效果

• 是不是简洁干净了许多,当然这不一定是你想要的, 可以自定义美化

7.部署到码云coding

• 进入自己的码云创建一个项目,开启pages

然后会给你一个访问地址 http://username.oschina.io/myblog

别急着访问

• 在项目目录找到 _config.yml 配置文件改2个地方url 和 root

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://username.oschina.io
root: /myblog/
permalink: :year/:month/:day/:title/
permalink_defaults:

• 配置完成

8. 查看博客

• 在项目目录下执行命令

//1.清除缓存
$ hexo clean
//2.生成静态文件
$ hexo g 
//3.发布到Coding
$ hexo d

• 完成后会显示

• 在浏览器打开刚才coding部署给你的那个 http://username.oschina.io 网址访问即可