Hexo+Github_BlogBuilding
leenickzh Lv4

概要

  • Hexo
  • Github Pages
  • Git
  • Node.JS

目标

  • 安装 Node.js
  • 安装 Hexo 并使用
  • 安装 Git 并了解与 Hexo 有关的简单命令
  • 知道如何使用 Github Pages 搭建免费个人博客

前言

2018 年大一(别算了,发稿时是大二嗷)的时候粗糙的学习了一些零零散散的云服务器知识
做过一个 wordpress 博客,跑在 centOS 上面,性能拉跨,遂卒.
后来发现 GitHubPages 简直大良心啊,可以托管静态页面嗷
具体效果参考https://nickk.cn
我没学过前端,只是了解过 HTML+CSS+JavaScript,大致了解前端框架
懂一丢丢 SQL
写的如果有问题,还请指正嗷

首先

  • Hexo:高效的静态站点生成框架,基于 Node.js

通过 Hexo,可以直接使用 Markdown 语法来撰写博客,写完后只需 3 条命令就能生成网页并上传至你的 Github 上,然后别人就可以看到你的网页了.

  • 无需关心网页源代码的细节
  • 用心写好博客内容就欧了

下面分享详细步骤嗷 👇

安装 Node.js

首先下载安装包:

node-v12.18.3-x64.msi

有能力的同学们可以上官网下载:https://nodejs.org/zh-cn/

安装选项全部默认,无脑Next嗷.

装好之后,Win+R打开命令提示符,输入node -vnpm -v,如果出现版本号,那就说明你的第一步完成啦 👍

安装 Git

下面来到第二步

想要把本地的网页文件上传到 Github 上面去,我们用到了分布式版本控制工具 Git

官网 👉https://git-scm.com/不多 bb 了,能上就上,不能上下我给的

Git(v2.28.0/X64)

安装一样无脑默认.

安装完成后同第一步打开命令提示符然后输入git --version验一波装好没.

同学,至此你的第二步就做好了 👍.

注册 GitHub 账号

学计算机的,谁没有 Github 啊.

么有的话就去注册一个 👉https://github.com

新建一个项目 👇

newRepository

then👇

createRepository

图中因为我已经创建了,所以不能创建了,把n1ckzhao换成你的 GitHub 的名字就欧了

例如:(yourname).github.io

点击Create repository就创建好了

然后 👇

Setting

点击那个绿绿的框框里面的蓝蓝的链接,就可以看到你的网页了

此处贴上大壮的任务点图 👇

GithubPages

到此,第三步 Over👍!

安装 Hexo

在你认为合适的地方新建一个文件夹,用来存放你的博客的源文件,俺的放在 U 盘里了,方便到处写垃圾文章哈哈哈

创建好了之后在里面右键->点击Git Bash Here,打开 Git 的控制台窗口

定位到你创建的目录下(参考cd \myblog\),输入npm i hexo-cli -g安装 Hexo.有几个报错的话,无视~

安装完之后当然是验货啊,输入hexo -v验证

然后初始化网站,输入hexo init初始化文件夹,接着输入npm install安装必备的组件.

那些密密麻麻的代码跑完后,输入hexo g生成静态页面,然后输入hexo s打开本地服务器,然后浏览器打开http://localhost:4000/,就可以看到你的博客了

下面放效果图 👇

HexoInit

看完之后Ctrl+C关闭本地服务器.

至此第四步欧了 👍!

连接 Github 与本地

来到第五层 👇

右键打开Git Bash Here,输入下列命令 👇

1
2
git config --global user.name "ydumund"
git config --global user.email "ydumund@outlook.com"

双引号里面的用户名和邮箱根据你自己的注册信息填入.

然后生成 SSH Key👇

1
ssh-keygen -t rsa -C "ydumund@outlook.com"

然后两下回车

打开你的 GitHub,点击头像->Setting->SSH and GPG Keys->New SSH key->Title 随便

然后Git Bash Here->输入cat ~/.ssh/id_rsa.pub后回车会出现下面这样的 👇

GitBash

这一长串复制后粘贴进这里 👇,再Add SSH key

SSh

上面的做完后,打开博客根目录下面的_config.yml文件,这是博客的配置文件

修改文件最后的配置 👇

1
2
3
4
deploy:
type: git
repository: https://github.com/(YourUserName)/(YourGithubPageURL)
branch: master

括号里的自己填入

至此第五步 ok👍!

补充

在博客根目录下Git Bash Here->npm i hexo-deployer-git安装这个扩展.

写文章/发布文章

怎么写文章呢?

在博客根目录下面Git Bash Here->hexo new (文章标题),新建一篇文章

然后用一个编辑器打开你的博客目录(这里推荐用 Visual Studio Code)

找到Source文件夹打开->_posts

就能看到你刚才创建的文章了(.md 是 markdown 格式的文件)

文章写好后->根目录中Git Bash Here->输入hexo g && hexo s

此时你的博客本地服务器启动了,按住Ctrl点击那个控制台里面的localhost:4000就能打开看到效果了

如果没什么问题的话,在控制台Ctrl+C关闭本地服务器后再输入hexo d上传到你的 GitHub 仓库就可以了.

至此你已经学会了如何新建/发布文章了 👍.

绑定域名

现在你的博客域名还是YourUserName.github.io,是不是感觉没有逼格?

想跟俺一样有自己的域名就去某云买一个域名,因为是 GithubPages 的网站,所以无需备案就能使用

然后就是添加解析记录了

SSh

解析添加后再打开你 GitHub 仓库的 Setting

SSh

这时填入你的域名后Save->在仓库的根目录下面创建一个叫 CNAME 的文件,里面写上你的域名才算完.

PS:当你点击 Save 后,它会自动在你的仓库根目录里面生成一个 CNAME 文件
我的建议是在你的博客的 Source 文件夹中建一个 CNAME 文件写上你的域名
这样你每次就不用手动添加了,很方便

个性化设置

去 Hexo 官网上面下载自己喜欢的主题即可,主题都会带有自己的文档,这里就不展开细说了

so,就到这里了,出问题了可以发邮件问我nickk

  • Post title:Hexo+Github_BlogBuilding
  • Post author:leenickzh
  • Create time:2020-08-20 15:31:37
  • Post link:https://nickk.cn/2020/08/20/Hexo+Github_BlogBuilding/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments