搭建博客教程（非手把手）

2019-12-01

字数统计: 1.3k字 | 阅读时长≈ 5分钟

1. 准备工作

安装Node.js
安装Git
注册github
创建一个新仓库，取名为name.github.io,name一定要是github用户名。
生成SSH公钥和密钥（在Git Bash输入两行指令）
1
2
cd ~/.ssh
ssh-keygen -t rsa -C "LingyvKong"

打开ssh服务（在Git Bash输入三行指令）
1
2
3
eval $(ssh-agent -s)
ssh-add ~/.ssh/id_rsa
clip < ~/.ssh/id_rsa.pub
第三句话的作用是复制公钥，直接去Github粘贴就好了。
添加SSH Key到Github：拷贝/Users/your_user_directory/.ssh/id_rsa.pub(注意有.pub后缀)文件中的内容到github中的SSH
ssh -T git@github.com验证是否配置完成。Are you sure you want to continue connecting (yes/no/[fingerprint])? 回答yes。

正确结果：

1 2	git config --global user.name "wuyalan"//输入注册时的username git config --global user.email "alan.wyl@foxmail.com"//填写注册邮箱

注意：如果出现问题，如permission denied，请直接参考Github官方文档：Github Help，按照下面画出的部分里面说的做就好了。官方文档挺全的，应该能解决大部分问题，请首先尝试。万不得已再去搜索引擎找别的经验。

win+R 输入cmd进入命令行后，npm install -g hexo-cli

2. 创建网页

在本地创建一个与 Repository 中博客项目同名的文件夹（如E:\name.github.io）在文件夹上点击鼠标右键，选择 Git bash here

1
2
3

hexo init
npm install //安装依赖包
npm install hexo-deployer-git --save //确保git部署

本地查看

1 2	hexo g //每次进行相应改动都要hexo g 生成一下 hexo s //启动服务预览

推送到github。完成这步可以使用name.github.io进入博客

git remote rm origin删除分支

1 2	git remote add origin git@github.com:LingyvKong/LingyvKong.github.io.git git push origin master

3. 添加域名

注册域名的地方要填的域名服务器地址：

f1g1ns1.dnspod.net/f1g1ns2.dnspod.net

域名配置：

DNSPod

给域名申请SSL证书：https://console.cloud.tencent.com/ssl

hexo博客双线路部署

双线路部署遇到的坑：

上面链接里给的coding的网页是企业版，记得应该点右上角去个人版注册。
coding.me中SSL认证不成功：要先关停DNS海外线路再申请。如果卡了记得刷新试试。CodingPages申请SSL/TLS证书错误

4. 编写博客

写新博客，在根目录git bash here然后：

1	hexo new 文件名

任何改动，两步更新：

1 2	hexo g hexo d

清除：

1	hexo clean

5.过程中可能遇到的包管理问题

¶npm升级指定依赖包

更新全局包

npm update <name> -g

更新生产环境依赖包：

1	npm update <name> --save

更新开发环境依赖包：

1	npm update <name> --save-dev

更新包：https://segmentfault.com/q/1010000010383545?sort=created

最优版本号：https://www.jianshu.com/p/1470c5d7b8c3

¶emoji无法显示

¶emoji插件

如何让markdown可以解析emoji呢？实际上我们发现，在编辑器中输入 :blush: 并没有表情出现，是为什么呢？这是markdown渲染引擎的问题，
Hexo默认是采用hexo-renderer-marked,这个渲染器不支持插件扩展，当然就不行了，还有一个支持插件扩展的是 hexo-renderer-markdown-it，所以我们可以使用这个渲染引擎来支持emoji表情，具体实现过程如下：

更换渲染器
进入blog跟目录，执行如下命令

1 2	npm un hexo-renderer-marked --save npm i hexo-renderer-markdown-it --save

安装emoji插件，执行如下命令

1	npm install markdown-it-emoji --save

编辑站点配置文件
就是编辑根目录的_config.yml文件，添加如下内容

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-emoji  # add emoji
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶

hexo-renderer-markdown-it详细配置请进: Advanced Configuration

添加emoji表情
1
npm install emoji

¶其余高级功能

¶设置置顶

给需要置顶的文章加入top参数，如下

---
title: 每天一个linux命令
date: 2017-01-23 11:41:48
top: 1
categories:
- 运维
tags:
- linux命令
---

如果存在多个置顶文章，top后的参数越大，越靠前。

我的博客国内部署的仓库地址在这儿：

https://dev.tencent.com/u/kpp/p/kpp/git/pages/settings

全国互联网安全管理服务平台

http://www.beian.gov.cn/user/index?token=f6d06c89-5676-46da-ab16-ccc3d4d9751b

网站备案教程：

https://developer.qiniu.com/af/kb/3987/how-to-make-website-and-inquires-the-police-put-on-record-information

七牛云创建域名：

https://portal.qiniu.com/cdn/domain/create?bucket=kpppic&fixBucket