Github Page + Hexo 搭建个人博客

Github Page + Hexo 搭建个人博客

因为自己也是第一次搭建博客,参考了网上教程。参考博客

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。Hexo官方文档开发

1. 环境配置

1.1 Nodejs安装

Hexo是基于Node.js驱动的,首先安装Node.js。

Nodejs安装教程

安装完成后在控制台查看是否安装成功,输入命令:node -v

1.2 Git安装

Git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。我们这里是用来管理github中的仓库项目,非常好用。Git本身完全可以做到版本控制,但其所有内容以及版本记录只能保存在本机,如果想要将文件内容以及版本记录同时保存在远程,则需要结合GitHub来使用。

Git安装教程

同样,安装完后在控制台查看是否安装成功,输入命令:git -v

注意在安装Git时,决定初始化新项目(仓库)的主干名字一定要选择main(第二个选项,见下图),因为Github自2020年起创建的仓库都会默认主干名字为为“main”;而选择第一个会在上传是创建一个为“master”的分支(不是默认),会导致博客显示不出来(因为项目上传到“master”那个分支去了,而默认是“main”)。虽然安装后可以修改,但博主在安装时没有修改成功,为了减少错误,选择main方便点。

确定初始化新仓库分支名字

1.3 Hexo安装

Hexo的安装比较简单,直接在控制台输入安装命令就行了。

npm install -g hexo-cli

安装完成后就可以初始化hexo了,有两种初始化方法(这个myBlog是项目文件名,名字可以自己取)

hexo init myBlog
cd myBlog
npm install

第二种是新建一个myBlog的文件夹存放项目(就是你的博客),再右键鼠标选择“Git Bash Here”,在中断输入

hexo init

项目结构如下

├── _config.yml # 网站的配置信息,您可以在此配置大部分的参数。 
├── package.json
├── scaffolds # 模版文件夹
├── source  # 资源文件夹,除 _posts 文件,其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件 
└── themes  # 主题文件夹
hexo s

运行 hexo s 命令,其中 s 是 server 的缩写,在浏览器中输入 http://localhost:4000 回车就可以预览效果,hexo会自动创建一篇hello world的博客,里面写了hexo的入门技巧,Ctrl + C 退出。

img

至此,博客搭建已完成;接下来就是部署到Github和美化主题了。

2. Github部署

我们在之前建的博客只能在本地服务器上,要能够外部访问需要部署到云服务器上;在这里,我们选用的是Github Page服务。GitHub Pages 是直接从 GitHub 存储库托管的静态站点,但它们不仅仅是静态文件的集合。 通过利用 Jekyll 和 Liquid 等网站生成技术,开发人员可定义被处理为完整静态网站的动态模板。当然,你也可以部署到自己的服务器上或者Gitee。

2.1 准备Github仓库

首先要注册一个Github账号,新建一个name.github.io的仓库,也就是new repository。

image-20230312103125715

因为博主之前创建好了现在就不能创建了。创建好后可以在你的仓库里新建一个index.html,里面可以随意输入几个字符,保存。

image-20230312104053197

选择仓库的settings选项,在菜单栏找到pages,这样就能得到你的博客地址了。

image-20230312104707440

点击Visit site或者在地址栏直接输入就可以访问刚刚写好的index.html文件。

2.2 将Github仓库与Git管理工具绑定

要使用 git 工具首先要配置一下SSH key,为部署本地博客到 Github 做准备。我们通过ssh key完成捆绑。

首先配置用户信息(记得替换“”里的文字内容)

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

生成密钥ssh key

ssh-keygen -t rsa -C '上面的邮箱'

然后找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容全部复制。

.ssh文件地址:C:\Users\administrator\.ssh
或者在终端输入 :cat ~/.ssh/id_rsa.pub

image-20230312130603066

将得到的ssh key全部复制,打开你的github主页,点击头像选择settings,点击SSH and GPG keys,点击new SSH key,将刚才复制的ssh key代码贴入,保存。

image-20230312131958967

在终端输入下面命令测试ssh是否绑定成功,若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容,则证明添加成功。

ssh -T git@github.com

2.3 部署hexo项目到Github

到了最后一步,需要将本地的博客项目(自己新建那个blog文件夹)部署到Github就好了。

首先修改hexo的配置文件。进入项目文件夹,打开项目根目录下的_config.yml 配置文件配置参数。拉到文件末尾,填上如下配置。

image-20230312140141740

deploy:
  type: git
  repository: https://github.com/yourname/yourname.github.io.git 
  branch: main

安装hexo-deployer-git 自动部署发布工具

npm install hexo-deployer-git --save

最后执行以下命令就可以部署上传啦,生成页面,以下 g 是 generate 缩写

hexo g

本地文件上传到Github上面,d 是 deploy 缩写

hexo d

中间会出现一个登录界面,登录你的Github账号就行。

稍等一会,在浏览器访问网址: https://你的用户名.github.io 就会看到你的博客啦!!

3. 为博客地址绑定域名

因为博客用的是Github Pages服务,而Github服务器在国外,就会存在访问很慢或者无法访问的问题;因此,有需求的同学可以给自己的博客绑定域名或者部署到自己的服务器上,当然部署到Gitee上也是可以。

下面将介绍如何为自己的博客绑定域名。

3.1 购买域名

购买域名可以去阿里云或者腾讯云。阿里云或腾讯云官方的引导也做得很好,即使是小白也能看懂域名购买的流程。

需要注意的是,国内购买域名需要备案,购买之前必须先完成实名认证。实名认证完成后才能购买域名。购买的的域名需要备案后才能使用,这个过程大概需要两到三天,还请耐心等待;备案完成后会有短信通知,这样你就拥有自己的域名(有有效期哦)了。

3.2 绑定域名

购买域名后打开域名控制台(点击自己的头像找这个选项吧..这个是指你购买域名的那个平台哦),选择云解析DNS。找到自己的域名,点击解析,在里面添加两条记录值。

image-20230312144715080

点击添加记录,分别添加两条记录值。

image-20230312144848166

image-20230312145308694

image-20230312145522635

填写完记录后回到你的Github,打开你的博客仓库name.github.io,点击settings,选择Pages。下滑找到Custom domain,在里面填入你的域名。

image-20230312151153272

这一步会在你的仓库里生成一个名为CNAME的文件,其值为你自己的域名。完成后就可以用你自己的域名访问自己的博客了。

注意:第一次填写需要申请证书,请耐心等待。填写时一定要确定域名是否正确,成功会显示DNS check successful。

如果通过域名访问自己的博客谷歌浏览器显示不安全,请勾选Enforce HTTPS选项。

在实际使用的时候会发现每次生成页面(hexo g这个命令)后都需要重新去Github绑定自己的域名。原因是每次生成后hexo都会删除CNAME这个文件(因为本地服务器里没有这个文件)。解决思路是在本地服务器里添加CNAME这个文件。

打开你的项目文件夹,在source文件夹下新建一个名为CNAME的Ttxt文件,在文件里填入你的域名。保存后将文件后缀名删去。

image-20230312153513484

4. 文档学习

Hexo是使用Markdown语言书写博客,Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。Markdown语法简洁明了、容易掌握,而且功能比纯文本更强,因此写博客使用它,可以让用户更加专注的写文章,而不需要费尽心力的考虑样式且Markdown完全兼容html,也就是可以在文章里直接插入html代码。没使用过的同学建议了解一下,使用非常方便。

用Makedown语言书写博客的工具有很多,这里推荐使用Typora,更加简洁、美观地书写博客。当然,也可以使用Sublime或者记事本、Notpad++。

Hexo管理的博客存放在博客项目文件夹source/_posts中,当需要发布一篇新的博客是使用以下命令,在修改这篇博客对应文件的内容就可以了,这一点还需要同学们多多探索。

hexo new post "新建博客文章名"

保存后刷新页面,通常情况下页面会自动更新,若修改没有生效,则需要重新执行以下命令:

$ hexo g
$ hexo s

”hexo cl“(cl 是clean的缩写)命令用于清除缓存文件(db.json)和已生成的静态文件(public)。在某些情况下(尤其是更换主题后),如果你发现对站点的更改无论如何也不生效,你可能需要运行该命令。

hexo cl

其他更多和写作相关的请查阅Hexo官方文档开发或者博客所用主题的配置文档。

5. 主题美化

从上述步骤我们的博客已基本建立完成。Hexo是默认使用landscape主题,可以看出博客的观感不太好,这就需要美化主题了。

博客的美化是选择大神已经发布的主题(当然也可以自己开发)。Hexo主题官网提供了很多精美的主题。选择自己喜欢的点击回到主题对应的仓库,按照主题的安装配置说明做就可以了。当然,你也可以在Github中搜索hexo themes(hexo主题),寻找你喜欢的下载安装。使用大神的主题记得给作者大大点一颗star哦(#.#)

image-20230312160447542


至此,博客搭建就完成了,剩下的就自行探索喽。学习不止。

posted @ 2023-03-12 19:50  岚珞璎  阅读(178)  评论(0编辑  收藏  举报