最近突然想起来,作为一个程序员,竟然没有自己的个人博客实属惭愧,于是自己就上网找了点资料,利用华为云+GitHub简单的搭建了一个属于自己的个人博客。写在前面:作为一个程序员,就是在不断地填坑填坑中过来的,自己搭建这个简单的个人博客也是踩了不少的坑,花费了不少的时间才最终完成,这其中也不乏一些坑是因为自己的个人原因导致的,幸好最后个人博客还是搭建成功了,写这个博客来记录下整个过程,纪念一下的同时减少一些大家踩坑的机会。
GitHub真是一个好东西,如果你目前还没有Github个人账号,可以通过GitHub官网进行注册,若已经拥有账号登录即可。
用过GitHub的同学都知道GitHub是个好东西,非常好用,我们不仅可以在上面查询一些项目及源代码,我们还可以把本地自己的代码等上传到自己的个人账号上,方便以后管理。而gitbash就是干这个活,它可以将本地的代码上传至GitHub中去,注册完GitHub的个人账号以后,我们需要下载gitbash来帮助我们管理我们的GitHub,gitbash的下载地址:https://gitforwindows.org/。不过个人亲测官网的下载速度十分感人,于是我们可以尝试其他方法,比如用百度网盘下载(链接:https://pan.baidu.com/s/1_hJhDHGo3UGPoqUlYiJ1Mg 提取码:f08v ),下载之后正常安装就好了。安装完成之后,你会发现一个Git Bash应用,点击打开之后是这样的: 到这里,gitbash的安装就完成了,然后我们需要将它和我们的github账号关联起来。 在上图的Git Bash终端中依次输入命令(引号内的内容相应替换):
git config --global user.name “Your Name” git config --global user.email "email@example.com"
这里的Your Name就是我们的github账号名称,email就是注册github账号时候使用的邮箱地址,这样我们就关联成功了。 这时我们可以选择在本地新建一个文件夹用于单独管理github相关文件,这样方便后期管理(我是在D盘新建了一个MyGit文件夹作为仓库位置),然后进入这个文件夹,鼠标右键,选择Git Bash Here,就会弹出Git Bash的运行界面。打开之后,我们输入命令:git init 。这样这个文件夹就变成了git可以管理的仓库了。关于更多git操作,可以参见廖雪峰的git教程讲的很详细。
在上述操作流程都完成之后,我们就可以开始制作我们的个人博客页面了,我们可以去jekyll官网选择自己喜欢的主题风格作为自己个人博客的风格模板,官网上有很多风格主题可供选择。看到自己比较喜欢的风格,可以点击Demo看看具体显示效果。如果自己已经选好了风格主题,就可以可以点击Homepage应用了,个人不建议下载,因为官网建议说直接网页用就好了,这样方便后期新版本的更新(主要是我也不会,这篇博客不介绍怎么通过下载来搭建博客 )。之后系统会自动跳转到你的GitHub页面,点击fork,就可以把这个博客拉到自己的github中。
在上一步点击完fork之后,页面会自动跳转,然后点击setting设置选项:进入如下界面,并重命名为用户名 .github.io,这是github对于个人博客的命名要求。到此,可以先点击Rename确定,然后个人建议可以为此页添加书签或者保存这个网址方便之后可以再快速找到,因为之后申请华为云域名,审核需要一段时间,跨度可能会达几天之久。
登录华为云官网:https://l.gushuji.site/huawei 如果之前没有华为云账号的可以先注册一个账号,账号需要实名认证,不过认证过程很快,认证之后可以在产品栏找到域名注册,点击进入在下图框中输入自己想要的域名并查域名,如果没有被注册,那就可以点击加入清单:选择年限之后,付款后这个域名指定期限内就是你的了。 付款完成之后进入域名解析DNS功能区;点击自己的域名,选择添加记录集,主机记录为www,选择类型为CNAME,设置值为自己的github用户名.github.io,点击确定。审核通过之后我们打开之前保留的github界面,下拉到github pages界面,把自己刚刚注册并解析的域名填写到custom domain中去并点击save,这里我们也可以选择choose a theme来修改我们的博客主题(如果下拉GitHub Pages页面没有找到custom domain,我记得是可以先去choose a theme 转一圈再出来就有了,也可能是我记错了 )。到此为止,我们就已经把我们的个人博客和我们的域名连接起来了,我们可以直接在网址栏中输入自己的域名,点击就可以跳转过去。
首先,我们进入之前设置好的github仓库位置,然后右键点击,选择git bash here,输入命令(这里的用户名均为github用户名,大家替换为自己的用户名即可):git clone git@github.com:用户名/用户名.github.io 这样我们就将github上的内容下载到本地仓库了。
如果你的设备之前已经进行过和github仓库的传输(设置过SSH密钥),你可以跳过这一步,直接到下一功能,如果不确定或者没有,那就要确定配置相应设置进行远程仓库的连接工作
第1步:创建SSH Key。在用户主目录下,看看有没有.ssh目录,如果有,再看看这个目录下有没有id_rsa和id_rsa.pub这两个文件,如果已经有了,可直接跳到下一步。如果没有,打开Shell(Windows下打开Git Bash),创建SSH Key:
$ ssh-keygen -t rsa -C "youremail@example.com" (引号内就是你的邮箱账号,然后一路回车,使用默认值即可)
如果一切顺利的话,可以在用户主目录里找到.ssh目录,里面有id_rsa和id_rsa.pub两个文件,这两个就是SSH Key的秘钥对,id_rsa是私钥,不能泄露出去,id_rsa.pub是公钥,可以放心地告诉任何人。 第2步:登陆GitHub,打开“settings”,“SSH Keys”页面: 然后,点“Add SSH Key”,填上任意Title,在Key文本框里粘贴id_rsa.pub文件的内容:至此add 系统就会自动生成密钥,这部分工作就做完了。
可能此时你会发现自己的相应目录下没有上图中的.git文件夹,其实这个文件夹是一个隐藏文件夹,将隐藏文件都设置为可见就可以看到相应的隐藏文件了。 点击后缀为.github.io的文件我们可以看到一堆文件夹和配置文件,下面将介绍部分(其实是其他的我也不知道,闲的没事不要乱改文件,要改就看清楚说明再改,不然很容易崩掉,我就有幸拥有几次改崩的血泪史 ): __ posts __ 文件夹:是存放你的所有博客文件的,这里面一开始会有几个博客模板,只是展示而已,这些都是可以删掉的,之后你用markdown语法写好的博客都会存放在这个文件夹里面用于上传github。 __config.yml :这个是你的博客页面显示的内容文件,要修改页面内容直接在github上修改这个文件内容就好(有些博主会说可以直接在本地修改,然后上传到github上去,很不幸的是我不会,试过一次,系统报错,如果有哪位老哥会的话可以教教我这个智障,本人不甚感激),格式和提示都很清楚,可能需要补充一点前端知识,不过不会也不要紧(我就不会 ),完全可以搞定。 (其他的文件个人强烈建议不要改,或者你比较熟悉那请忽视这句话 ) 之后就可以一起快乐地写博客了
先下载一个markdown语法编辑器(链接: https://pan.baidu.com/s/1aRgnpGe6PTk-DQSHa7zlCg 提取码: hxys ),或者下载一个Notepad++软件用于编辑。
markdown语法我这就不说了(自己也不会,慢慢学 ) 写好的博客先存在本地的 __ posts __文件夹下 然后我们进入 __ posts __文件夹,单击右键,选择git bash here,依次输入下面三条命令:git add . git commit -m“blog” git push -u origin master (上述命令解读:git add .命令是本地增加哪些文件,本来是git add +具体文件名,但是这样不太方便,很容易漏掉或者写错,所以直接写成git add . (记得有个“点”)。git commit -m"描述本次修改的内容的修饰语" ,描述语可以不加,个人建议加上比较好,这样方便之后自己查找记录,第一次上传Github一般都会用git push -u origin master 命令,之后再上传就可以直接使用git push origin master) 一般终端显示如上图所示就表明此次更新成功,但是很不巧,我很多次都是下面这个画面 这表示没成功,别慌,只要在这个命令之前输入:git pull --rebase origin master ,然后再重新运行上一条指令,就成功了。 这样,我们添加在本地中的文件就可以被上传到github仓库中去,审核之后就可以更新我们的博客界面了。 如果你按照上述流程做完之后中途也没其他不一样,但是最终github还是无法更新,个人建议可以尝试一下重启电脑(滑稽 ),可能可以解决一部分玄学问题。 经过这一次的博客搭建,自己算是也有了一点收获,也踩过了一些坑,不过最终结果还是挺满意的,至少圆满搭建完了我的个人博客(https://www.ljljljljljlj.com/),要是小伙伴在搭建的过程中还有什么不懂的,欢迎评论区留言,我们一起探讨学习。
参考: https://blog.csdn.net/nieyx4367/article/details/89441330 https://www.cnblogs.com/xinxianquan/p/11129286.html https://www.liaoxuefeng.com/wiki/896043488029600/896954117292416 https://blog.csdn.net/weixin_44394753/article/details/91410463 https://blog.csdn.net/u013120247/article/details/53263169