背景介绍
博客作为高自由度的个人空间伴随着互联网发展至今,每天有无数的人在互联网上po出自己的生活、分享自己的经验。
本文所讲的并不是微博、短视频自媒体之类的平台,而是专属于你自己的以文字为主的个人博客。别人可以通过博客自由的与你交流,你也可以通过博客结缘志同道合的朋友们。
选取方案
本文选择Github Pages+Hexo+Git+npm+node.js方案,理由如下:
- Github Pages是几乎完全免费静态网站托管平台,唯一可能产生限制的是Github Pages,仓库大小限制在1gb之内,每月流量100g之内。
- Hexo作为最流行的静态博客框架,有很多插件和主题可以选择。
- 一次搭建免维护,Github Pages还提供了免费的HTTPS和三级域名。
- 绑定个人域名自由、方便、快捷,使用个人域名可以接入CDN加速提高网站访问速度。
- 数据安全,可以回档各个历史版本。
具体步骤
注册Github并配置仓库和域名
- 在GitHub官网注册一个 GitHub 账号,并在个人主界面里选择创建一个新的 Repository 。
- 进入页面详情后,在 Repository name 的位置填写 用户名.GitHub.io,网站的访问地址也会是 用户名.GitHub.io
- ps:如果你不想搭建Hexo博客那么可以直接在设置选择GitHub提供的官方主题。
虽然使用 用户名.GitHub.io 也可以直接访问,但是使用域名的话可以使用CDN加速服务,毕竟GitHub在国内的访问是不稳定的。
- 首先,注册一个域名,推荐阿里云万网。
在域名控制台添加解析
- ping一下 用户名.github.io 获取GitHub Pages的ip
- A记录 @ 刚才获取到的IP
- cname记录 用户名.github.io
- 在Github仓库根目录创建一个名为CNAME的文件,里面填写你的域名。当用户访问 用户名.github.io 时会直接跳转到新域名。
- 套个CDN:CDN设置解析到Github ip,域名DNS设置为CDN的DNS服务器。
配置本地环境
Hexo+Git+npm+node.js是安装到本地的,Hexo可以根据md文件(或者其他格式的文本,这取决于你安装了什么渲染器)快速渲染出静态网站并使用git发布到远程仓库上,我们编写博文也是在本地编写的。
安装npm、node.js。
安装Git并配置
- 打开Git bash,执行cd ~/. ssh
- 生成密钥ssh-keygen -t rsa -C "你的邮箱地址"
- 找到用户文件夹.ssh\id_rsa.pub并复制里面内容,打开Github个人设置-> SSH and GPG keys ->New SSH key,将之前文件的内容复制到里面,Title随便填。
- 测试 ssh -T git@github.com,显示以下内容表示部署成功。
Hi 你的用户名! You’ve successfully authenticated, but GitHub does not provide shell access.
执行
- git config --global user.name "用户名"// 你的github用户名,非昵称
- git config --global user.email "邮箱"// 填写你的github注册邮箱
- 设置本地仓库与远程连接: git remote add origin git@远程仓库地址
安装Hexo并配置
- 安装npm install -g hexo
- 安装Git部署插件,输入命令: npm install hexo-deployer-git --save
初始化,设置文件夹。
- cd /自定义路径/hexo/
- hexo init
预览配置 hexo g -s
- 打开浏览器访问 http://localhost:4000 即可看到Hexo博客。
保留CNAME文件
由于hexo每次提交都会将原有代码删除,所以我们为了保留域名解析,在Hexo根目录的source文件夹中创建CNAME文件(没有后缀),其中填写你的域名,这样我们每次提交都会保留CNAME文件,让解析能够正常运行。
写博客
使用shell工具cd到hexo根目录下运行hexo n "name",新生成的博客在/hexo/source/_posts下
页头,不同主题可能有更多功能:
---
title: postName #标题
date: 2013-12-02 15:30:16 #生成时间
categories: 分类 #分类
tags: [tag1,tag2,tag3] #文章标签,可空,可多标签
description: 文章摘要
---
以下是正文
example:
---
title: 如何做笔记
date: 2022-04-15 20:46:45
index_img: https://source.unsplash.com/random/800x400
tags: [笔记]
---
正文:
# 笔记 note
## 前言 foreword
index_img 是文章显示在首页的封面图,这里使用了一个随机图片的接口:unsplash
发布博客
hexo clean #清理缓存
hexo g hexo generate #编译
hexo s hexo server #本地运行服务器
hexo d hexo deploy #发布
组合:
hexo s -g #生成并本地预览
hexo d -g #生成并上传