个人博客搭建

本篇笔记为 2020-11-26 组内培训内容

个人博客的优缺点

缺点

• 流量少

优点

• 定制化

公众号和个人博客对比

• 书写体验

框架选择

• Hexo 静态，使用 GitHub Pages，无需服务器
• Gridea 静态，使用 GitHub Pages，无需服务器
• WordPress 动态博客，需要服务器
• 自主开发

Hexo

Hexo へそ

• 官网：https://hexo.io/
• 作者：https://zespia.tw/
• GitHub：https://github.com/hexojs/hexo

准备工作

• GitHub 账号
  • 多密钥问题，ssh-keygen 在 ~/.ssh 目录下生成多个秘钥，并通过 config 文件管理秘钥，分别用于 GitLab、Gitee、GitHub 等
  • 创建一个 public 仓库，仓库名为 用户名.github.io，如用户名为 kuranado3，则仓库名应为：kuranado3.github.io
• Node.js
• Git 基础
• Markdown 语法

安装

官方文档

npm install hexo-cli -g
hexo init Blog

若 hexo init 卡死，则执行如下命令：

mkdir Blog
cd Blog
git clone https://github.com/hexojs/hexo-starter.git
git submodule init
cd themes
git clone git@github.com:hexojs/hexo-theme-landscape.git
mv hexo-theme-landsacpe landscape
cd ..
npm install
# 本地启动预览
hexo server

主题

Skapp

• 主题安装：

cd themes
git clone https://github.com/Mrminfive/hexo-theme-skapp.git
npm config set registry https://registry.npm.taobao.org
sudo npm install -g node-gyp
npm install --save node-sass
npm install --save hexo-autoprefixer
npm install --save hexo-filter-cleanup
npm install --save hexo-generator-feed 
npm install --savehexo-generator-sitemap 
npm install --save hexo-renderer-sass 
npm install --save hexo-renderer-swig 
npm install --save lunr@0.7.1
npm install --save moment
npm install --save object-assign

• Blog/_config.yml 文件配置：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
# Site
# 博客的标题
title: KURANADO
# banner 显示的子标题
subtitle: KURANADO BLOG
# banner 显示的简短介绍
subtitle_desc: 日常学习与兴趣交流
# 博客介绍（同时用于seo）
description: 日常学习与兴趣交流的个人博客
# seo关键字
keywords: KURANADO, KURANADO BLOG, 前端博客, 前端, 程序员, 前端开发, 全栈开发, node.js, javascript
# 个人介绍
introduction: 不思量，自难忘！
# 博客的favicon图标，支持本地及在线两种方式，本地请将图标放置于 themes/hexo-theme-skapp/source/img 目录下
favicon_ico: http://blog.static.minfive.com/other/favicon.ico
# 博客的左上角logo图标，支持本地及在线两种方式
logo: http://oo12ugek5.bkt.clouddn.com/images/logo-text-white.png
# 头像/二维码（用于显示在底部）二选一
avatar: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png
# qrcode: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png
# 文章的默认封面
default_cover: http://oo12ugek5.bkt.clouddn.com/images/default_cover.png
# header 的背景图
header_cover: http://blog.static.minfive.com/other/banner-bg.jpg
# 404 页面的背景图
error_page_bg: http://blog.static.minfive.com/other/dogs.jpg
# 页面加载loading图标
loader_img: http://blog.static.minfive.com/other/loader.gif
# 站长信息
author:
  name: Xinling Jing
  link: http://github.com/kuranado3
# 用于页面 footer 的站长信息
about:
  info: 本站是基于 Hexo 搭建的静态资源博客，主要用于分享日常学习、生活及工作的一些心得总结，欢迎点击右下角订阅 rss。
  address: Shanghai, China
  email: jingxinling2048@163.com
language: zh-cn
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://kuranado3.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: skapp 

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:KURANADO3/KURANADO3.github.io.git
  branch: master

# menu
menu:
  home: /
  archive: /archives
  about: /about

# 统计页面 pv
busuanzi: true

# Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

# Sitemap
sitemap:
  path: sitemap.xml

#Gitalk
gitTalk:
  clientId: 673759460ba8b90e7eaa
  clientSecret: 25d9e6e3b2f98e218ea73474656e61251d8847db
  repo: git@github.com:kuranado3/kuranado3.github.io.git
  owner: kuranado3
  admin: 
    - kuranado3

• 文章模板：

---
title: Hello World 
cover: http://blog.static.minfive.com/post/18-03-03/vue-router.jpg
author: 
  nick: kuranado
  link: https://www.github.com/kuranado3
editor:
  name: kuranado
  link: https://www.github.com/kuranado3
subtitle: Haaaaa world
tag: 
  - java
  - vue
---

Hello World

将文章放到 Blog/source/_post 目录下，并起名为 HelloWorld.md

部署

hexo clean
hexo generate
# 本地预览
hexo server
# 安装一次即可，后续部署无需再次安装
npm install hexo-deployer-git --save
# 部署到服务器
hexo deploy

MD 源文件同步问题

• 切分支：默认的 master 分支用来存放生成的站点静态文件，通过切出新分支，将 md 文件上传到 GitHub 仓库即可

评论

可以集成哪种评论取决于选用的主题是否支持，Skapp 支持 GitTalk

• Disqus - 需翻墙才能使用，不推荐
• GitTalk - 无需翻墙，推荐
• 网易畅言
• 友言
• 自主开发评论系统

统计

统计功能需主题支持才可使用，Skapp 支持百度统计和谷歌分析
注册对应账号，将获取的 UA id 填写到 Blog/_config.yml 文件中

• 百度统计
• 谷歌分析

付款码

Live2D

• 为你的hexo添加色气满满的live2d吧！

Gridea

官网：https://gridea.dev/

准备工作

• GitHub 账号
• Git 基础
• Markdown 语法

主题

• 相较 Hexo 要少很多

评论

• 主题支持

统计

• 主题支持

文件同步问题

• 使用 OneDrive 同步主题，将 Gridea 工作空间整个目录放到 OneDrive 下

域名

无域名方案

• 免费
• 难记 xxx.github.io

购买域名

• 价格：.com 域名一年 70 元左右
• 续费：70 一年
• 备案：备案分两种：工信部分案和公安部备案，一般只做工信部备案即可正常解析域名
  • 有无居住证：工信部备案若填写上海地址，若无居住证，将无法提交审核，可填写老家地址
  • 有无服务器：工信部域名备案通过后，需配置该域名一直解析到某台服务器（提交备案时，也需要填写该服务器 IP 地址），若域名长期没有解析到某台服务器，将会被注销备案

写什么

• 年末总结
• 设备安利
• 旅游美景
• 读书笔记
• 技术问题总结
  • 公司内容，需隐去业务细节，关键词脱敏、图片打码等，换一种业务场景，但同样能够清楚的表现问题
• 技术学习总结
  • 设计模式 编故事
  • 源码分析
  • 新技术学习
  • 系列教程
• 效率工具安利
  • 开发工具
  • 个人配置
  • 插件
• 个人开发产品展示

图床

• 七牛云

上传方式

• 手动
• 脚本，如：GitHub - markdown-image-alfred

https

Hexo 博客可以支持 https，但为了避免跨域问题，请确保上传到图床的图片也是用 https 地址。对于七牛云的免费存储来说，http 部分的流量是免费的，但如果开通 https，这部分的流量是收费的。所以为了减少开销，不太建议静态博客开通 https

优秀个人博客列表

• https://github.com/timqian/chinese-independent-blogs

RSS 订阅

绝大部分独立博客都会提供 RSS 订阅，将 RSS 订阅地址添加到订阅软件里即可订阅博客的更新文章，RSS 订阅软件有很多，我这里用的时 Mac 版的 Leaf app

参考

• 彻底解决 hexo init 卡顿问题
• Hexo 博客 skapp 主题部署填坑指南