4d5931ace3b2ac1d9a0e4b460ee99436
【新手向】从零开始搭建一个酷炫免费的个人博客

于是小吴昨天上午花了半个小时使用 GitHub + Hexo 搭建了一下个人博客,打算将公众号的文章搬过去,支持关键字搜索、分类标签功能。效果是下面这样子的👇

结果后台好多小伙伴挺好奇博客是怎么搭建的,实际上这个挺简单的,小吴就从零开始分享一波如何搭建一个酷炫免费的个人博客吧,如果已经有博客的小伙伴可以留言一波网站地址:)

GitHub创建个人仓库

登录到 GitHub ,如果没有 GitHub 帐号,请使用你的邮箱注册 GitHub 帐号:https://github.com/join?source=header-home

注册

注册

登录成功之后,点击 GitHub 中的 New repository 创建新仓库,仓库名应该为:用户名 .github.io 。这里用户名使用你的 GitHub 帐号名称代替,这是固定写法。

创建新仓库

创建新仓库

ps: 因为我已经注册了同名仓库,因此第二次创建时会报错。

我的仓库名为👇:

仓库名

仓库名

Git管理

Git 是目前世界上最先进的分布式版本控制系统(没有之一)。这是使用 Git 的目的是为了将我们的网站从本地提交上服务器(GitHub)上面去。我认为 Git 操作是程序员应该具备的一个基本操作,具体的 Git 操作细节可以查看廖雪峰的教程,讲的十分详细 https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

安装好 Git 后,只需要进行下面的配置即可。

配置信息

在终端进行操作,设置 user.name 和 user.email 配置信息,我这里设置为全局。

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成密钥

通过注册的邮箱生成 ssh 密钥文件:

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三个回车即可,默认不需要设置密码。最后得到了两个文件:id_rsaid_rsa.pub

拷贝密钥

打开 id_rsa.pub 文件,将里面的内容全部复制。

内容全部复制

内容全部复制

粘贴到GitHub

GitHub SSh

GitHub SSh

添加新的 SSH

添加新的 SSH

测试GitHub SSH

添加好 SSH Key后,进行测试。

ssh -T git@github.com

你将会看到:

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

选择 yes

Hi MisterBooo! You've successfully authenticated, but GitHub does not provide shell access.

ssh -T

ssh -T

如果看到Hi后面是你的用户名,就说明成功了。

安装Node.js

Hexo 基于 Node.js,因此需要先安装 Node.js,你可以在这里进行对应电脑版本的下载:https://nodejs.org/en/download/

Node.js下载

Node.js下载

你也可以通过命令行进行安装:

cURL:

$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

安装完成后,重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable

Hexo安装

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

Hexo使用

安装好 Hexo 后,马上就能使用了。首先初始化博客,输入:

$ hexo init myBlog

接下来,进入文件夹 myBlog,输入

$ hexo s

然后,打开浏览器输入地址:

localhost:4000

hexo网站

hexo网站

执行到这里事实上博客就已经搭建好了,接下来就是去完善它。

注意:下面的命令都是在 myBlog文件里进行操作的。

添加文章

添加文章

添加文章

top Created with Sketch.