Hexo + 码云 免费搭建个人blog windows系统

前言
使用软件：git bash，Atom编辑器
最近想写一些博客，就想自己也代建一个个人的站点，经过朋友介绍知道了hexo这么个好东西，今天我就给大家分享一下我个人的搭建经验。
这篇博客虽然写的是码云，但是里边的东西依然适用于github和coding等代码托管网站。

Hexo什么鬼？

https://hexo.io/
A fast, simple & powerful blog framework
一个快捷、简单并且强大的博客框架。
他是基于Node.js的一个静态博客框架。支持Markdown解析文章，能够很快的生成特定主题的静态网页。
https://hexo.io/themes/
废话不多说，开整。

前序工作

1. 安装完Node.js https://nodejs.org/en/
2. 安装git bash工具 https://gitforwindows.org/
   （ps：安装完Node.js 和Gitbash不需要任何多余的配置，一路next就好）
3. 安装hexo

• 先新建一个存放blog所有东西的文件夹

• 在文件夹内右键 是不是看到git bash here，点他
  

  

  git bash here

• 直接输入安装hexo的命令：
  npm install -g hexo-cli

• 安装完成后，查看版本，输入命令：
  hexo -v
  恭喜你安装完成
  

  

  查看版本

开始搭建

可以参考官方文档 https://hexo.io/zh-cn/docs/

1. 初始化hexo，在刚才的文件夹中打开git bash输入命令（git bash打开后
   因为一直要用，所以不要动不动就关闭掉）：
   hexo init
   初始化可能比较慢，稍安勿躁（要下载hexo框架的很多资源，还有默认主题），完成之后
   

   

   start blog with hexo
   
   你会看到以下文件
   
   

   根目录下的文件结构
   • 解释一下（目前不需要管他们）
     • node_modules：为hexo的插件目录，作用是利用此目录的插件生成
       对应功能的静态HTML等脚本代码。
     • scaffolds：模版文件。每次新建文章时，Hexo 会尝试在 scaffolds 文件夹中寻找同名文件，并根据其内容建立文章。所以可以在这里添加自己的 layout，作为常用的新建模板使用。
     • source：这个文件夹是放文章和图片等资源文件的。
     • themes：存放主题的文件夹
     • _config.yml：站点配置文件，很多全局配置都在这个文件中。

2. 做完第一步，来先看看效果，
   git bash中输入命令：
   hexo server
   （或者懒人模式，直接输入hexo s）

   • 在浏览器中输入http://localhost:4000
     就可以看到效果。如下图
     

     

     初始化之后的效果图

   • 在git bash窗口中按 ctrl + c 退出本地服务

3. 生成静态文件
   此步是为了上传到码云做的。因为目前只能自己在本地访问博客，但是想让其他人看到就要结合码云（github或者coding）来做了。
   还是在咱们blog的文件夹中打开git bash输入命令：
   hexo generate（或懒人模式直接输入hexo g）
   目录中就会多出一个public文件夹
   

   

   public file
   
   这个文件夹就是我们托管到码云上用的文件夹。

4. 部署静态Html文件到码云

   • 首先我们要有一个码云账号（小伙伴们用自己的邮箱手机等注册一个）
     https://gitee.com/

   • 创建一个项目

   • 创建完项目后得到项目的Https的地址后面要用。地址获取如下图
     

     

     项目仓库的位置

   • Hexo 提供了快速方便的一键部署功能，让您只需一条命令就能将网站部署到服务器上。但是我们要先安装一个插件。
     在git bash输入命令：
     npm install hexo-deployer-git --save
     接下来是配置根目录_config.jml文件（用记事本或者各种编辑器打开），
     修改deploy的值，修改前如下图：
     

     

     deploy
     
     修改后如下图
     
     

     修改deploy
     • 其中repo: 跟的地址就是刚才码云仓库的地址
       
       

       仓库地址
       
       (以防有些小伙伴找不到，赘余一下)(最后修改完千万别忘了保存一下)
       还有 branch和message这两个写不写都可以，默认也会帮你补上，知道git命令的小伙伴都会知道这两个字段是干嘛的，不知道的忽略就好，不影响使用，有强迫症的学霸可以自行百度 :)

   • 开始部署 在blog文件夹中打开git bash输入命令：
     hexo deploy
     之后会弹出输入码云账号密码的对话框。
     部署成功之后进入自己的码云账号，查看之前创建的项目中出现了本地项目中public文件夹中的文件
     

     

     部署后
     
     这时候就代表部署成功了。

   • 然后开启码云的Pages功能：
     

     

     pages的位置

   • 启动服务
     

     

     启动服务

   • 访问连接
     

     

     访问连接

   • 擦，什么鬼，怎么和本地服务器看到的不一样，样式全无
     

     

     没有样式

   • 不要慌，我也在这里郁闷了好久，所以写出来分享给大家

   • 原因：
     网上各种说法都有，有绑定自己域名的，有什么什么的，我觉得都没有抓住本质，其实就是需要修改一下_config.yml配置文件，之前在本地跑服务器有样式，是因为所有的资源都在本地，都能找到，现在资源都上传到云端了，资源的对应关系肯定有所改变，因为找不到对应的资源了所以没有样式了。

   • 解决办法：修改_config.yml
     还是用记事本或者各种编辑器打开_config.yml找到
     

     

     url
     
     注释写的也很清楚，需要修改url和root，根据刚才Page服务中看到的网址
     
     

     网址
     
     修改成
     
     

     修改url

   • 然后再进入blog的文件夹执行命令：

     • hexo clean
     • hexo generate
     • hexo deploy
       建议，以后每次进行修改然后重新部署到码云时，都执行这三句命令 或者偷懒直接输入hexo generate --deploy

   • 然后咱们再回到码云的Pages页面，点开链接，如果看到
     

     

     网页
     
     大吉大利，今晚吃鸡，
     但是如果看到的还是
     
     

     没有样式
     
     擦，还是老样子，有没有搞错，惊不惊喜，意不意外，大家不要慌，该做的咱们都已经做完了。
     出现这种情况，
     • 1.码云部署没有反应过来
     • 2.就是浏览器保留了之前的缓存，清除一下缓存，或者直接换一个浏览器再打开我们的网址

   • 当你看到
     

     

     网页
     
     一片极乐净土，恭喜你，终于费了九牛二虎之力完成了部署，自此我们拥有了一个自己的小天地

页面的默认样式不好看，想换样式，我下一篇https://www.jianshu.com/p/4f8898fdcb86

再来给大家说一下怎么修改样式

结束语：
如果博客中写的那里有不对的，或者有什么疑惑都可以留言或者发邮件等方式联系我。
邮箱：[email protected]
QQ ：576275472
微信号：YuXuanEdward