十分钟上线无成本Hexo博客

本文涉及的产品
全局流量管理 GTM,标准版 1个月
.cn 域名,1个 12个月
云解析 DNS,旗舰版 1个月
简介: Github Pages+Hexo+Git+npm+node.js

背景介绍

博客作为高自由度的个人空间伴随着互联网发展至今,每天有无数的人在互联网上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

保留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 #生成并上传
目录
相关文章
|
资源调度 JavaScript
十分钟教会你如何使用VitePress搭建及部署个人博客站点
十分钟教会你如何使用VitePress搭建及部署个人博客站点
1091 0
|
弹性计算 前端开发 NoSQL
新手学生上线我的博客
自己参加飞天加速计划活动,阿里云助力学生免费上线项目,我也成功使自己的小项目上线,在学期间学习前端相关知识,逐渐熟练后便开编写了一个小项目,通过老师了解阿里云的飞天加速计划活动,通过新手预备营学习了上线服务器的步骤,再经过学习发现问题解决问题,最后成功上线自己的项目。
151 1
新手学生上线我的博客
|
关系型数据库 MySQL 应用服务中间件
上线了上线了,我的博客上线了!
搞了半天总算把博客给弄好了,域名备案因为过期了所以暂时只能用IP访问了,http://120.55.164.9/,分享一下搭建环境的过程。
上线了上线了,我的博客上线了!
|
JavaScript 前端开发 网络安全
不花钱,用一个小时搭建自己的博客网站
不知道大家平常有没有写博客的习惯,一般写博客都会记录什么?都会在哪里写自己的博客呢?
不花钱,用一个小时搭建自己的博客网站
|
资源调度 JavaScript 持续交付
阿里云效持续集成 Hexo 博客
官网 https://flow.aliyun.com/ 阿里云效我总结特点就是:开箱即用, 特别强大, 而且界面美观!
286 0
阿里云效持续集成 Hexo 博客
半小时教你使用hexo建立一个漂亮的个人博客
半小时教你使用hexo建立一个漂亮的个人博客
114 0
半小时教你使用hexo建立一个漂亮的个人博客
|
存储 运维 安全
基于函数计算快速搭建Hexo博客(体验有礼)
Serverless 降本增效免运维的特性为开发者带来了实打实的好处,11 月 9 日至 11 月 23 日期间,阿里云函数计算上线了“Hexo 博客部署体验活动”,完成部署即可获得“TOMY 多美卡合金车模一辆”。
基于函数计算快速搭建Hexo博客(体验有礼)
|
域名解析 前端开发 API
云开发十分钟托管快速静态博客-学习4
云开发十分钟托管快速静态博客-学习4
140 0
|
Web App开发 对象存储
云开发十分钟托管快速静态博客-学习-1
云开发十分钟托管快速静态博客-学习-1
124 0
|
JavaScript
云开发十分钟托管快速静态博客-学习2
云开发十分钟托管快速静态博客-学习2
123 0