详解:如何在Github上搭建自己的博客主页

545 阅读3分钟

前言

好的博客主页不仅能够分享自己的技术知识,更能够展示博主的技术实力。

本文将结合作者的实践,为读者讲解如何在GitHub上利用Hexo,快速搭建一个可以在互联网上自由访问的博客主页。

作者的博客主页:jiangjiaheng.github.io/

技术栈

1.GitHub:允许用户在自己的代码仓库创建一个博客主页。

2.Git:代码仓库管理技术,连接GitHub与本地代码。

3.Nodejs:搭建博客主页的技术基础,本地创建运行博客主页。

4.Hexo:基于nodejs的一个博客框架,可以快速生成博客主页。

大纲

  1. 技术环境准备。
  2. 创建GitHub博客仓库。
  3. Hexo生成博客主页。
  4. Git上传博客主页。
  5. 访问GitHub博客主页。

实例讲解

1. 技术环境准备

1. GitHub、Git

首先你需要在GitHub上注册一个账号,然后通过Git建立连接,具体操作过程请参考这篇文章: juejin.cn/post/684490…

2. nodejs、hexo

进入nodejs的官网nodejs.org/en/download…,选择自己电脑适合的版本下载即可。

在这里插入图片描述

安装完成后,在命令行中输入node -v查看nodejs是否安装成功。

在这里插入图片描述

安装完nodejs后,在命令行中输入以下命令,安装hexo。

 npm install -g hexo

安装完成后,输入hexo查看是否安装成功。

在这里插入图片描述

完成上述准备工作后,我们就可以开始搭建自己的博客了。

2. 创建GitHub博客仓库

在GitHub中创建新项目。

在这里插入图片描述

在项目中输入项目名称:Owner+.github.io,例如你GitHub注册名称为Zhangsan,那么你这个项目名称就是:zhangsan.github.io

GitHub会自动检测到github.io,并识别为博客主页。

在这里插入图片描述

填写完项目信息后,点击创建,生成博客主页。

这个时候,你就可以直接在浏览器输入:https://zhangsan.github.io进行访问了。

3. Hexo生成博客主页

在电脑中新建一个空白文件夹,在该文件夹下打开命令行,输入:hexo init生成hexo项目。

在这里插入图片描述

输入:hexo s开启本地运行,打开浏览器访问 http://localhost:4000 即可看到内容。

在这里插入图片描述

4. Git上传博客主页

接下来,我们要做的就是把hexo生成的主页上传到GitHub上,打开_config.yml文件。

在这里插入图片描述

如图所示配置git信息,也就是把GitHub的博客主页仓库配上去,就可以了。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:zhangsan/zhangsan.github.io.git
  branch: master

这个文件中还有其他的配置信息,例如名称、主题等等,可以自己慢慢去探索,这里不多说了。

完成配置后,执行npm里面的配置命令。

在这里插入图片描述

  1. clean:刷新项目,清除生成的文件;
  2. build:生成上传文件;
  3. server:开启本地预览服务;
  4. deploy:上传生成的文件到GitHub上。

依次执行:cleanbuilddeploy命令即可完成hexo博客主页上传。

5. 访问GitHub博客主页

上传成功后,直接访问自己的博客地址,就可以了。

在这里插入图片描述

结语

以上就是本文的全部内容了,感谢你的阅读,文中部分技术要点受限于文章篇幅,并没有展开讲解,如果你有什么疑问或者建议,欢迎你随时留言,互相讨论。

最后,祝工作顺利,生活幸福。

在这里插入图片描述