低成本快速搭建个人博客

最小的成本搭建一个有自己域名的博客站点（Hexo 生成页面，托管于 GitHub，使用自己的域名，可以安心写作又不用花费很多心思定期维护）

准备工作

  1. 一个博客网站模板：Hexo/Jekyll/vuePress（这里我选用了 Hexo）

主要涉及知识点：linux 基础命令，mysql 基础操作

  1. 购买自己的域名（建议）
  • 百度不收录.github.io结尾的站点，直接使用 GitHub 托管的话，用户在百度上无法搜到自己站点上的内容；
  • 有 SSL（网址前面的 https://）比没有会在搜索引擎的排名中更加靠前
  • 在内容相同的情况下，有着自己的域名更加利于 SEO(搜索引擎的优化)

Blog 框架：

hexo 官网

hexo 的特点

  • 支持 Markdown: 支持 Markdown 意味着你可以把精力从排版中解放出来.
  • 轻量: 无需拥有后台及数据库,专心写好你的文章
  • 一键部署: 可以通过 Git 或者 ftp 来将生成的静态页面部署到服务器或者主机空间中
  • 插件丰富: 丰富的插件可以满足你的各种需求.

hexo 的工作机制

  • 基于 Node.js,将/source 文件夹下的资源(文章,图片,模板),按照预定的配置文件,转换成静态页面放置到/public 目录下.
  • 如果需要预览或者部署,hexo 会把 public 作为 web 目录处理.

Hexo 安装所需环境

  • Node.js
  • git

Tip ⚠️

博客目录有全局 config.yml，在每个 theme 主题中也有一个 config.yml，对应的不同工作！

  • Hexo 配置文件:myblog/config.yml
  • 主题配置文件:myblog/themes/next/config.yml

开始搭建

操作流程图

  1. 安装 Hexo

推荐yarn global add hexo来全局安装 Hexo.（保证 NodeJS 已经安装好的情况下）

Yarn/npm 全局安装和本地安装的区别:

  • 全局安装会把 package 存放在用户目录指定的目录下
  • 本地安装则是存放在当前项目的 node_module 目录中
  1. 创建站点目录
  • 2.1 新建一个空文件夹MyBlog（将作为 hexo 站点目录）并初始化博客
1
$ hexo init MyBlog
  • 2.2 进入 MyBlog 文件夹安装相关依赖
1
2
$ cd MyBlog
$ npm install
  1. 用hexo s在本机运行后来看一下默认的效果
  2. 在 source/_posts/ 目录下创建文章 或通过 hexo new post-title（文章 markdown 的名字） 创建新文章，步骤如下：

例.
创建一个名为 宏彦获水 的文章，可以在上述目录下创建一个文件，名为宏彦获水.md

1
2
3
4
5
6
7
---
title: 宏彦获水
date: 2019-07-26 22:32:51
tags:
- 热门时事
---
全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 李彦宏亮相百度第三届AI开发者大会，在李彦宏专注介绍百度AI成绩时，一位男子直接冲上舞台泼水。李彦宏先是一愣，后来用英语问到：What’s your problem？...

刷新页面，就可以看到这篇文章啦

CreateABlog

主题样式

在Themes | Hexo中有非常多的主题可以供选择：

安装方法

  • 将主题所在的 GitHub 仓库 clone 到自己的博客的 themes 目录下，在 config.yml 中修改以下字段为主题所在的文件夹名称即可：
1
theme: landscape;

也可以考虑自建一个主题，或从其他博客平台上移植一个主题过来

站点配置

对标题做修改只需要修改博客根目录下的_config.yml 即可，部分文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
title: Peng Sifan # 这里写博客的标题
subtitle: It's my whole life! # 可以理解为博客的副标题
description: Peng Sifan's self blog!
keywords:
author: Edison Van
language: zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

发布站点

使用GitHub来托管我们的站点

  • 创建一个 GitHub 仓库用来存放我们的博客，GitHub 的仓库名称为<你的用户名>.github.io
  • 安装 Hexo 的 Git 发布（部署）模块：npm install hexo-deployer-git --save
  • 在 config.yml 中加入以下部分：
1
2
3
4
5
6
7
deploy:
  type: git
  repo: https://github.com/EdisonVan/EdisonVan.github.io.git
  branch: master
  message: Blog Update
  name: EdisonVan
  email: vanjohnson@foxmail.com

⚠️repo 后接你 GitHub 仓库的 SSH 地址或者 HTTPS 地址，这里我用的 HTTPS 地址，因为我公司网络无法访问 SSH 地址。😢
SSH 地址格式：git@github.com:<用户名>/<仓库名称>.git

开始发布

1
2
3
hexo clean # 清理之前public的文件
hexo g # 重新渲染所有页面为 HTML
hexo d # 发布！

selfBlog.png

如果使用hexo clean会清理 public 里面的所有文件进行重新生成，而 public 中的文件实际上就是 userName.github.io 仓库中生成博客页面的文件，所以对应的 CHAME 文件也会被清除，所以小改动暂时不使用 hexo clean。大改动 clean 之后需要再去 public 中添加 CHAME 文件。
CNAME 的文本文件，CNAME 文件没有后缀，里面写入你要绑定的域名，比如www.pengsifan.com
注意 CNAME 文件里面的网址写完整，和你自己解析设置的一致，如我的解析中主机记录加了 www 所以我的 CNAME 文件内就写成了www.pengsifan.com

设置自己的域名解析

如果没有填写Custom domain你的站点地址将会是<GitHub 用户名>.github.io，如果有自己的域名且希望使用的话，就在source 目录下放一个名为 CNAME 的文件（对，没有任何后缀名），内容只有一行，就是自己的域名，将自己的域名做一个CNAME解析到<GitHub 用户名>.github.io地址即可

GitHub-Page-20190704

博客的维护与更新

静态的博客，且有 GitHub 进行托管，所以博客在程序的维护方面就省了很多的事情，让我们可以更加专注于内容和样式上的细节。
更新与内容
一个博客的灵魂在于博客的内容，如：

  • 技术的记录（类似日志，方便以后自己查询）
  • 想法（对于生活的感悟，结交更多的朋友）
  • 创作（作为一个自平台对于自己创作的发布）
  • 力扣题解（记录做题目时的想法思路）
  • 读书心得
  • 前端
  • Python 学习笔记
  • Vlog 链接
    参考如何撰写 LeetCode 题解
    每当自己有想法时，都可以将自己的想法总结成文发布于博客上。博客的编写是一个熟能生巧的过程，写得越多，对文字的把握就越好，也更加容易在书面上正确地表达自己的想法。无论从结交朋友，收割Offer还是其他方面都是百利而无一害的

文章书写

使用 VsCode/Typora 书写

自建主题

使用vuepress搭建网站

图床方案

ipic + 七牛云（每月 10G 免费流量） + ipic mover(图床搬家工具)

GitHub 图床

因为图片走 oss 和 cdn 网站打开速度会很快，所以使用七牛云或者阿里云都是一个不错的方案！七牛云每个月 10g 免费流量基本够用！

对象存储
七牛云，阿里云也有对象存储的功能，主要生产缩略图，生成水印各种的非常方便，并且人家的对象存储有 cdn 加速

🌟 赏颗星星吧！🌟

#编码之外
低成本快速搭建个人博客
https://www.pengsifan.com/2019/08/06/HexoBlog-20190704/
作者
sifan.peng
发布于
2019年8月6日
许可协议