原文来自：Potter个人博客
概要内容
- 搭建步骤
- 安装环境
- 图床加速、集成Gitalk、集成Valine
- 绑定域名、版权配置、赞赏、站点加速等
搭建原因：几年前一直在CSDN写博客，经常用心写的文章，结果过一段时间文章关联的图片全部丢失，给他们反馈无果，图片丢失也找不回。后面就转用印象笔记，几年下来记录了不少笔记，但是发现还是缺少一个互动的环节，不知道自己写的笔记有没有问题，没法与他人发生碰撞。想快速产生好的想法或者更好的解决方案，看到网上不少朋友都写在自己博客网站上，于是就决定自己也搭一个，一来记录自己成长，二来与大家互动让自己的知识得到升华，而且个人博客也显的逼格更高。 呵呵~ 以下是我零碎2~3天搭自己博客网站的步骤，希望能给后面的人提供帮助。
搭建步骤：
Github 创建博客仓库
在 GitHub 新建一个仓库（Repository），名称为 {username}.github.io，注意这个名比较特殊，必须要是 github.io 为后缀结尾的。比如：aa4790139.github.io
安装环境
在本机安装Node.js
安装Hexo
mkdir /d/Work/Projects/PotterBlog
cd /d/Work/Projects/PotterBlog
npm install -g hexo-cli
初始化Hexo项目
hexo init blog
-
如果出现以下情况报错：
解决办法：关闭npm 的https
npm config set strict-ssl false
编译生成&本地启动
cd blog
hexo generate
hexo server
等启动完后浏览器打开http://localhost:4000，看到hello world 博客页面，说明你成功）
切换主题为Next
- 首先：clone next 主题
git clone https://github.com/theme-next/hexo-theme-next themes/next
-
其次：修改项目根目录下的 _config.yml，找到theme字段，更改为next即可
-
最后：修改主题next的默认的相关配置，主题配置文件路径：themes/next/_config.yml ( 具体怎么配置看这篇文章相关部分即可：www.cxyxiaowu.com/6407.html
创建文章
- 命令：(提示：运行如下命令后，文章会生成到source/_posts下)
hexo new hello-world
- 文章开头格式规范：(提示：按此格式方便编译识别标题、时间、类别等)
---
title: 标题 # 自动创建，如 hello-world
tags:
- 标签1
- 标签2
- 标签3
categories:
- 分类1
- 分类2
---
创建Github 编写Markdown文章的图床
- github 创建BlogPicBed 仓库
- 创建个人访问令牌
- 下载PicGo (目的：利用此工具上传图片至Github创建的BlogPicBed仓库中)
- PicGo 配置成Github,如下图所示
- 利用PicGo 上传一张图片，然后去BlogPicBed仓库的img文件夹找到你刚刚上传的图片，然后右键复制图片链接地址
- 使用Github 图床仓库的图片地址(提示：复制的图片地址是不带raw参数的，所以需要手动在地址后面拼"?raw=true" 否则图片不会显示)
比如：
使用jsdelivr CDN加速图床：
格式：https://cdn.jsdelivr.net/gh/github账号/图床仓库名@版本/仓库图片相对路径
比如：https://cdn.jsdelivr.net/gh/aa4790139/BlogPicBed@master/img/2.png
集成Gitalk
- 获取GitHub OAuth授权(参考文章：GitHub OAuth 第三方登录示例教程)
- GitHub 创建留言仓库BlogGitTalk(注意：此仓库必须为公开仓库，不能为私有仓库)
- themes/_config.yml 找到gitalk，配置如下样子
gitalk:
enable: true
github_id: github账号 # GitHub repo owner
repo: BlogGitTalk # Repository name to store issues
client_id: GitHub OAuth授权申请下来的client_id # GitHub Application Client ID
client_secret: GitHub OAuth授权申请下来的client_secret # GitHub Application Client Secret
admin_user: github账号 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
distraction_free_mode: true # Facebook-like distraction free mode
# Gitalk's display language depends on user's browser or system environment
# If you want everyone visiting your site to see a uniform language, you can set a force language value
# Available values: en | es-ES | fr | ru | zh-CN | zh-TW
language: zh-CN
集成Valine
valine:
enable: true
appid: leancloud 创建的应用AppID # Your leancloud application appid
appkey: leancloud 创建的应用appkey # Your leancloud application appkey
notify: false # Mail notifier
verify: false # Verification code
placeholder: Just go go # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: zh-cn # Language, available values: en, zh-cn
visitor: true # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0
部署至Github
- 打开blog根目录下的_config.yml配置,找到Deployment, 配置参考如下
deploy:
type: git
repo: git@github.com:github用户名/github用户名.github.io.git
branch: master
- 安装hexo-deployer-git 部署插件
npm install hexo-deployer-git --save
-
部署
- 在根目录新建部署脚本deploy.sh，内容如下：
hexo clean hexo generate hexo deploy- 运行部署命令:
sh deploy.sh
绑定域名
ping github用户名.github.io
- 阿里云平台域名绑定博客域名ip(第2步ping出来的ip)
版权配置
- next/_config.yum 找到creative_commons
- 配置成如下样子：
creative_commons:
license: by-nc-sa
sidebar: false
post: true
language: zh-CN
QQ交流平台：
hexo next主题交流：1076692090
参考文献：
- Hexo博客搭建之在文章中插入图片
- Hexo使用攻略-添加分类及标签
- Markdown必备-本地图片快速上传至图床
- GitHub OAuth 第三方登录示例教程
- Github Pages 开始为自定义域名提供 HTTPS 支持
- JSdelivr 使用说明
- 免费CDN：jsDelivr + Github
特别致谢：
- cxyxiaowu ：www.cxyxiaowu.com/6407.html
- Lining Wei ：weilining.github.io/
以上: 如发现有问题，欢迎留言指出，我及时更正
