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

2021-03-04 10:39:15 浏览数 (1)

1. 准备工作

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

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

2. 创建网页

  1. 在本地创建一个与 Repository 中博客项目同名的文件夹（如E:name.github.io）在文件夹上点击鼠标右键，选择 Git bash here
代码语言：javascript复制
hexo init
npm install //安装依赖包
npm install hexo-deployer-git --save //确保git部署
  1. 本地查看
代码语言：javascript复制
hexo g //每次进行相应改动都要hexo g 生成一下
hexo s //启动服务预览
  1. 推送到github。完成这步可以使用name.github.io进入博客

git remote rm origin删除分支

代码语言：javascript复制
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博客双线路部署

双线路部署遇到的坑：

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

4. 编写博客

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

代码语言：javascript复制
hexo new 文件名

任何改动，两步更新：

代码语言：javascript复制
hexo g
hexo d

清除：

代码语言：javascript复制
hexo clean

七牛插件

emoji的shortcode查找

查颜色

查颜色的网页应用

配色方案

渐变配色

一个不错的颜色表

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

¶npm升级指定依赖包

更新全局包

npm update <name> -g

更新生产环境依赖包：

代码语言：javascript复制
npm update <name> --save

更新开发环境依赖包：

代码语言：javascript复制
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跟目录，执行如下命令
代码语言：javascript复制
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
  • 安装emoji插件，执行如下命令
代码语言：javascript复制
npm install markdown-it-emoji --save
  • 编辑站点配置文件 就是编辑根目录的_config.yml文件，添加如下内容
代码语言：javascript复制
# 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

¶其余高级功能

  1. 不用图床保存图片
  2. 插入无法获取外链的音频： var ap = new APlayer({ element: document.getElementById("aplayer-kfISkxxG"), narrow: false, autoplay: true, showlrc: false, music: { title: "路过人间", author: "郁可唯", url: "/2019/04/30/Fourier/lu_guo_ren_jian.mp3", pic: "/2019/04/30/Fourier/poster.jpg", lrc: "" } }); window.aplayers || (window.aplayers = []); window.aplayers.push(ap); 网易云外链插入音乐 Hexo插件插入音乐
  3. 插入视频 hexo 插入视频和音乐播放器

¶设置置顶

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

代码语言：javascript复制
---
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

hexo 网络安全 markdown github git

0 人点赞