0%

GitHub+Hexo搭建个人博客的主要流程

介绍了从零开始搭建个人博客的基本流程。

20200930更新:

Next主题从5.x版本更新到了8.x版,迁移了代码库以及说明文档


1. 基本介绍
  • Hexo——静态网页生成器:通常,我们并不能徒手撸出漂亮简洁大方让人眼前一亮的网页,(如果你是前端大神JavaScript,CSS什么的玩的贼6的当我没说)只能对着word文档一行行的码字。那么如何把自己写下的所(wu)思(bing)所(shen)想(yin)包装成精美的网页文档呢?这时候就需要用到静态网页生成器了。这里使用的Hexo是一款“快速、简洁且高效的博客框架”。简单来讲,它发挥的作用就是把我们写的纯文本的博客转化成熟的网站内容。

  • GitHub——云端服务器:我们打开一个网站,是向一个特定的站点发送请求下载网页数据到本地并予以展示的过程,我们在上一步生成的网页存在自己的电脑上,关机别人就不能访问了,这时候我们就需要一个云端服务器替代我们存储网页内容。这里推荐(全球最大的同性交友网站)“面向开源及私有软件项目的托管平台”GitHub,其GitHub Pages功能能够很好的满足我们的需求。

有了这样一个基本认知之后,接下来就开始分步骤开始搭建网站吧:

2. 操作流程
获取云端服务器空间
  • 注册GitHub账号
  • 点击New repository,新建一个公开仓库,注意名字必须是:username.github.io。
    GitHub默认其为GitHub Page的仓库。
    这样我们就有一个地方可以在云端存储网页文件了。
搭建本地文件上传到云端的通道
  • 安装Git
    简单来讲,Git可以帮助我们把本地的网站文件同步到GitHub上。
  • 把本地的Git与云端GitHub帐号绑定。
构建本地静态网页生成器
  • 安装Node.js
    Hexo基于Node.js,可以理解为Hexo是Node.js的一个包,所以这是必要的前置软件。
  • 安装Hexo
    打开命令提示符(就是那个小黑窗,win+R,输入cmd,回车),输入以下命令:
    npm install -g hexo-cli
    通过Node.js平台的默认包管理工具安装Hexo。
生成静态网页
  • 在指定文件夹生成博客网站的框架:
    在所需要的位置新建一个文件,在该处打开命令行工具cmd,输入以下命令:
    hexo init
    这样Hexo就会自动在这个文件夹内生成必要的基本博客框架。
  • 新建一篇博客:
    hexo new test_blog
    这就是你的第一篇博文了,利用markdown语法对其进行编辑,加入想要的内容。
  • 生成静态网页并测试
    生成静态网页,Hexo自动检测文件变动,根据文本生成网页:
    hexo g
    打开本地服务器:
    hexo s
    这样,你就可以通过本地浏览器访问 http://localhost:4000/ 来查看你的网站效果了。
部署到服务器
  • 本地测试好了显示效果之后,编辑\blog\_config.yml配置文件,将Git的配置信息写到Hexo的配置文件里。
  • 在博客文件夹内打开cmd,输入命令:
    hexo d
    这时候,你的本地博客网页就上传到服务器上了,任何人都可以通过 username.github.io 这个网址随时访问你的博客网站了~
关联域名
  • 如果需要的话,可以在阿里云购买个性化域名进行关联,让别人更容易记住你的博客地址。
    例如: baidu.com 显然这个域名你是买不到的
3. 详细教程

在你准备实际动手之前,想必你已经发现了这篇教程(只是个空壳子)并没有涉及到很多具体的操作细节。主要原因是网上已经有很多大神写的GitHub+Hexo搭建个人博客的详细教程了,确实没必要再重复劳动。

全过程详解:
GitHub+Hexo 搭建个人网站详细教程 by 吴润 (强烈推荐)
Hexo官方文档
NexT主题官方文档
Markdown 语法说明 (简体中文版)
GitHub Pages 绑定来自阿里云的域名