欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-18 08:27:12
...

前言

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

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

作者的博客主页:https://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建立连接,具体操作过程请参考这篇文章。

2. nodejs、hexo

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

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

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

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

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

 npm install -g hexo

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

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

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

2. 创建GitHub博客仓库

在GitHub中创建新项目。

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

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

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

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

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

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

3. Hexo生成博客主页

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

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

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

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

4. Git上传博客主页

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

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

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

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

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

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

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

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

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

5. 访问GitHub博客主页

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

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

结语

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

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

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

相关标签: 应用工具