手把手教你制作个人博客（hexo+github+typora+cnblog）

手把手教你制作自己的个人博客（hexo+github+cnblog）

By作者：贵哥牛X

博主刚学编程，看了很多攻略都说程序员入门必做的一件事就是写博客，所以在网上找了很多教程，但遇到了很多坑，终于在连续奋斗了几个小时后，终于成功的将个人的博客建立了起来，同时也形成了一些个人小小的心得，希望能帮刚入手的童鞋避一些坑吧。

1.安装node.js和git

下载地址：node.js：http://nodejs.cn

git：https://git-scm.com/

PS：安装过程中一直Next下去就可以了。（安装路径可以修改）

查看node.js版本：node -v

查看git版本：git --version

PS：如果能够正常显示版本，即表示已经安装成功

2.注册Github帐号并建立仓库：https://github.com

(注册过程省略)

注册完成后，点击左侧创建仓库，注意一点：仓库取名格式：用户名.github.io（重要）

PS：其他内容不用管，直接点击“Create repository”完成仓库创建就可以了。

3.在电脑上安装hexo

• 在磁盘中选取一个位置，创建一个叫“blog”（名字可以自拟）的文件夹。右键选择Git Bash Here工具，输入命令：
• npm install -g cnpm --registry=https://registry.npm.taobao.org

• 输入命令：cnpm install -g hexo-cli （正式开始安装hexo）
• 
• 输入命令：hexo init （初始化）之后，blog文件夹下多了很多文件
• 
• 本地预览效果：先输入命令 hexo s ，然后在浏览器打开 localhost:4000。（关闭命令 hexo ctrl+c）
• 

4.设置git仓库的ssh

• 本地生成sshkey 命令：cd ~/.ssh （进入.ssh文件 ）
• 继续输入：ssh-keygen -t rsa -C ‘注册时的邮箱地址’
• 
• 打开id_rsa.put文件并复制生成的key
• 回到Github主页点击头像找到Settings设置，依次点击“SSH and GPG keys”、“New SSH key”
• 
• 复制刚才的key到key框里去
• 
• 最重要一步：验证，命令 ssh -T [email protected] ，根据提示输入 yes
• 
• 绑定成功后，会收到邮件提醒。
• 本地绑定GitHub，命令：
• git config --global user.name “注册时用户名”
• git config --global user.email “注册时邮箱”

5.测试上传博客

• 现在GitHub里找到刚刚新建的仓库，点开进去找到右侧的“code”，复制下方的地址

• 在blog目录下找到_config.yml 用记事本打开，修改文末如下图属性
• 
• 上传工具安装：在“Git Bash Here工具”中（忘记了，往上翻第三点第一条），输入命令 cnpm install hexo-deployer-git
• 
• 安装完成后，输入：hexo new "test" (test是新建的一个名为test文章名称，可以更换别的名字)
• 依次输入 hexo g 和 hexo s 之后，在浏览器输入：localhost：4000 可以重新预览
• 最关键一步：部署 命令→ hexo d
• 部署成功如下图，仓库里会多出很多文件，同时，会收到邮件提醒（第一次有）。
• 

6.恭喜你：终于可以打开自己的第一个博客了噢

• 在浏览器里输入仓库地址“https://用户名.github.io”就可以正常访问博客了

7.述说自己遇到的坑及解决方案

• hexo d 命令之后遇到的各种失败：
  • You should configure deployment settings in _config.yml first!……的解决办法
    • 确认第五点里“hexo-deployer-git”安装是否成功，如果没有，npm install hexo-deployer-git --save
    • _config.yml文件里最后的deploy文本格式：★★★type:等节点需要缩进。
    • 
  • fatal: unable to access ‘https://github.comxxxxxxxxxxx’: Failed to connect to xxxxxxxxxxxxx的解决办法
    • 把https的s去掉再重新上传一次
    • 配置hosts：C盘> windows文件夹=>system32 文件夹=>drivers=>etc=>hosts=>编辑 直接打开 粘贴到最后一行：192.30.253.112 github.com
  • 其他问题，可以尝试在上传时直接输入链式代码块：
    • hexo clean && hexo g && hexo d

8.博客编辑工具：推荐 Typora

• Typora现在是款收费软件，网上可以搜到，也可以私聊博主索取噢，特别好用。至于Typora软件的使用教程，百度一下很多，上手几分钟。
• 这里重点要介绍的是他与“EasyBlogImageForTypora”的结合功能，能够解决新手用markdown过程中的图片上传博客就无效的问题。博主也是查阅了很多资料，下载了很多软件，对照网上的攻略尝试了很多工具，最后总结出一句话：用Typora软件最方便。
• 下载安装好Typora并激活成功
• PS：作用：使用Typora写作，图片即时同步到博客网站，无需第三方图床，写完可直接粘贴。支持网络图片上传。

9.注册一个博客园https://www.cnblogs.com/

• 按照官网提示，开通一个博客
• https://i.cnblogs.com/settings 打开这里，找到博客设置，记住博客地址、登录名、MetaWeblog访问地址（重要）
• 
• 
• 上方MetaWeblog 访问令牌，要点击查看，然后点击申请一个访问令牌（因为后面访问博客园不能直接用密码访问，需要用到访问令牌）

10.下载EasyBlogImageForTypora工具

下载地址：https://github.com/xiajingren/EasyBlogImageForTypora/releases/

• 下载EasyBlogImageForTypora，解压到指定目录，目录中不能有空格、中文等特殊字符（相当重要）
• 运行程序，配置相关信息
• 
• 这里用的参数看上一条圈出来的，尤其要注意的是：用户名是MetaWeblog登录名而非邮箱，密码是MetaWeblog访问令牌而非密码。
• 设置完成后在当前文件夹内多出一个文件“config.json”
• 
• 
• 如果设置有问题，可以直接删除该文件，重新双击程序设置参数

11.设置Typora图片上传

• 打开Typora，在上方菜单（文件F）里点击“偏好设置”——图像，按照下图所示，5步设置。

• 设置成功的话，点击“验证图片上传选项”后应该如下图所示，验证成功

• 

12.最关键一点：上传博客的文档在哪里？

• 上传博客的文档是后缀名为“.md”的文件，md就是markdown文档。——现在明白为什么用Typora了吧！！
• 只要每次把编辑好的md文档复制到“……\blog\source\posts”路径下的“_posts”文件下，然后重复第五点上传博客就OK了

13.至此：整个博客的搭建+编辑攻略完成，博主第一次玩，还很生疏，大神们多多指教，带我飞！！！

: