保姆级利用Github搭建自己的个人博客,看完就会

学向勤中得,萤窗万卷书。这篇文章主要讲述保姆级利用Github搭建自己的个人博客,看完就会相关的知识,希望能为你提供帮助。

保姆级利用Github搭建自己的个人博客,看完就会

文章图片

大家好,我是辰哥~
作为一名喜欢技术的爱好者,平时喜欢把自己学习技术的心得或者一些踩坑、易错的过程记录下来,首选的是技术平台(博客),今天辰哥来教大家如何利用Github来搭建一个自己的个人博客平台。
相信Github大家都有听过,甚至是经常用,除了可以作为开源源码的交流平台,还提供了搭建博客的功能。目前一些大佬、老师的博客用的就是Github搭建的(辰哥见过很多)
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

01、环境准备在搭建Github博客之前,先准备一下环境(安装下方的顺序来安装,别弄混了)
1、访问git官方地址,下载对应的安装包,进行安装(简单的点击下一步)。
2、安装好之后,鼠标右键可以看到:Git Bash Here,点击后打开了。
3、输入:git --version
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

出现这个说明git安装成功。
1、访问nodejs官方地址,下载对应的安装包,进行安装(简单的点击下一步)。
2、安装好之后,配置环境变量,并在终端里面输入:node -v
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

出现这个说明nodejs安装成功~
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

测试是否安装成功,命令:hexo -v
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

保姆级利用Github搭建自己的个人博客,看完就会

文章图片

02、git配置SSH key相信看到本文的你应该听过github,并且也注册了自己的github账号,如果现在还没有的可以去github注册一个账号。
先看本地是否配置好SSH key(命令:cd ~/.ssh)
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

这里辰哥之前就配置了,现在删除配置,重新配置一边,方便读者可以跟着进行配置。
再次查看
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

可以看到提示:/c/Users/Administrator/.ssh: No such file or directory
1.配置ssh
输入生成命令:ssh-keygen -t rsa -C " 邮件地址" 后。连续回车三次即可
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

可以看到在用户文件夹下生成了一个ssh文件夹
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

进入到ssh文件夹,复制id_rsa.pub文件里全部内容
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

接着打开github主页,点击个人设置,点击左侧的SSH and GPG keys,点击New SSH key
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

将id_rsa.pub复制的内容粘贴到key中,title随便起一个就行。
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

点击 Add SSH key
输入测试命令后,接着输入yes,出现下面这个提示说明成功
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

配置账号和密码
$ git config --global user.name "liyunchen" #你的github用户名 $ git config --global user.email "xxx@163.com" #填写你的github注册邮箱

03 搭建个人博客 1.新建博客
开始之前先介绍一下heox的基本命令
hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成静态页面至public目录 hexo server #开启预览访问端口(默认端口4000,\'ctrl + c\'关闭server) hexo deploy #部署到GitHub hexo help# 查看帮助 hexo version#查看Hexo的版本

新建一个保存博客的存放目录,比如辰哥的是:D:\\公众号\\0722
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

可以看到博客存放目录出现了如下内容:
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

保姆级利用Github搭建自己的个人博客,看完就会

文章图片

保姆级利用Github搭建自己的个人博客,看完就会

文章图片

可以看到访问没问题。
但这个只是在本地预览,接着将这个博客部署到github。
2.部署到github
新建一个github仓库
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

给仓库起个名称,注意!注意!注意!
辰哥的仓库名称为:liyunchen.github.io
因为这个仓库名称将作为你github博客的访问地址
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

编辑_config.yml,_config.yml在博客存放目录下
deploy: type: git repository: git@github.com:liyunchen/liyunchen.github.io.git branch: main

repository仓库地址改为自己的
branch看自己的github仓库是master还是main,辰哥这里是main,所以就填写main
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

保姆级利用Github搭建自己的个人博客,看完就会

文章图片

保姆级利用Github搭建自己的个人博客,看完就会

文章图片

可以看到成功访问
04 编写博客搭建好博客之后,日常中肯定是需要编写博客并且同步到github,辰哥来带大家写一篇博客
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

查看对应的文件夹
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

【保姆级利用Github搭建自己的个人博客,看完就会】可以看到生成了一个chenge-first-blog.md文件,通过这个md文件去写博客
默认的内容是这样的:
--- title: chenge-first-blog date: 2021-07-22 14:08:14 tags: --- 这里方开始编写正文

开始编写博客内容(markdown格式)
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

这里辰哥以之前的一篇文章为例
其中的< !--more--> ,作用是在查看文章的时候,点击more的时候再加载全部的文章内容
编写好之后,开始部署到github
再次访问:
保姆级利用Github搭建自己的个人博客,看完就会

文章图片

可以看到编写的博客已经同步到github平台,并且< !--more--> 的作用也可以看到了:read more
05 小结本文从0到1搭建了自己的个人博客,过程很详细,并且可能会出现的错误都做出了说明和解决方法。绝对的保姆级教程,看完就会
希望看到本文的你可以给辰哥一个赞,点个再看就更好了,鼓励原创作者不断前进。最后附上辰哥搭建好的博客地址,所有人都有可以访问。

    推荐阅读