github+hexo搭建博客（一）

背景：

• 一直想搭建帅气、高端的个人博客，然后在上次某些原因，就放弃搭建博客，因为再次见识到大神的博客，果断再次心动了

---

第一步

1. github pages介绍

• github是项目托管网站，列出了项目的源文件，所以github 有一个pages功能，可以自定义主页，用来代替默认的列出源列表的这个页面

所以，github Pages就可以被认为是用户编写、托管的github上的静态网页

2. github相关官方文档

• 文档一
• 文档二

3. github提供两种类型的主页

• 个人或组织主页
  • 页面内容位于 master下
• 项目主页
  • 页面内容位于每个项目的master下
• （PS：我们创建的博客属于个人页面，但也可以创建为项目主页）

第二步，注册github账号

1. 申请github的账号，github官网——>PS：使用火狐或者谷歌浏览器，否则有可能无法注册

• 填写账号相关信息
  • 账号名
  • 邮箱
  • 密码

2. 第二步，填写完信息后，选择你的个人计划

3. 第三步，就是选择就是你做啥的，专业的啥啥啥
4. 第四步，就是去你的邮箱验证你的账号即可
5. 然后登录你的github账号，创建一个新的存储库，并设置私人可看，还是公共可看

第三步，安装git客户端

• 在注册完github账号之后，在自己电脑上安装git客户端
• 步骤教程及下载链接
• PS：在上传本地代码的时候，push本地代码到github出错

第四步，安装Node

1. 在装完git客户端之后，下面就是装Node了

• Hexo是基于Node环境的静态博客，npm工具是必不可少的

2. Node下载地址
3. 下载完，直接安装即可（比较简单，就不截图了）
4. 然后在git客户端执行 node -v ，会显示出你的安装版本，这就表示安装成功了

• PS：有可能在执行 node -v 没显示出你的版本号，可以重新打开下你的git客户端，再来执行该命令

第五步，安装hexo

• hexo官方文档

1. 在安装完成node之后，在你的本地电脑上新建一个存放blog的文件夹（自己要记得存放在哪，等会要用到该路径），然后 cd 到该路径下

• 小技巧：
  • 路径，可以用tab键补全哦！！！

2. 在切换到你的blog目录下后，执行 npm i -g hexo 命令

• 建议用cnpm安装，会相对快一些，有可能你的cnpm命令没有存在，就需要你安装下cnpm命令

安装cnpm命令
npm install cnpm -g --registry=https://registry.npm.taobao.org
然后在执行
cnpm i -g hexo

• 当然你也可以直接执行npm i -g hexo 命令，但是很慢很慢......（反正我是很慢的那种）

3. 然后确认成功，执行命令 hexo -v

hexo -v

4. 再初始化，执行命令 hexo init

hexo init 

5. 这时候在打开存放blog的文件夹，会看到一些文件，如下图

• 文件夹各种文件的作用
  • node_modules：依赖包
  • scaffolds：命令生成文章等的模板
  • source：用命令创建的各种文章
  • themes：主题
  • _config.yml：整个博客的配置
  • package.json：项目所需模块项目的配置信息

6. 接下来修改blog文件夹中的文件，修改_config.yml文件的一些配置（记得冒号后必须有空格，不然配置不生效！！！切记！！！切记！！！）

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

7. 然后在执行最后的三条命令

命令1生成部署文件
hexo deploy
命令2，然后部署
hexo generate
命令3，然后运行
hexo server

hf@hf-PC MINGW64 /d/git-blog
$ hexo deploy
INFO  Start processing
INFO  Files loaded in 347 ms
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2018/04/index.html
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: fancybox/[email protected]
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/[email protected]
INFO  Generated: archives/2018/index.html
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: js/script.js
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: css/style.css
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: 2018/04/02/hello-world/index.html
INFO  28 files generated in 828 ms

hf@hf-PC MINGW64 /d/git-blog
$ hexo generate
INFO  Start processing
INFO  Files loaded in 234 ms
INFO  0 files generated in 261 ms

hf@hf-PC MINGW64 /d/git-blog
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

8. 下面就是见证奇迹的时候到了，打开你的浏览器，输入http://localhost:4000

9. 这就是github+hexo搭建博客