利用hexo+Gitee搭建个人网站


为什么要搭建个人网站

个人网站用处有很多,可以写博客来记录学习过程中的各种事,不管是新知识还是踩坑记录,写完就丢在网站上,方便日后复习,也可以共享给他人,让其他人避免踩雷。

当然也不仅限于技术性的文章,生活中有什么感想,都可以记录在博客中,记录一次出行、聊一聊美好的爱情,统统不在话下。

个人感觉,搭建个人网站还有一个不错的好处,就是可以锻炼我们解决问题的能力,博客搭建肯定不是一帆风顺,会遇到各种各样的小问题,有很多细节需要自己去打磨,在打磨的过程中,咱们解决问题的能力总会有提升。如果你觉得很麻烦,也可以选择现有的技术交流平台写博客,比如csdn、博客园等。但是我个人感觉,使用这些平台相比起搭建个人网站就少了很多个性,功能比较局限,不像个人网站,可拓展性很高,比如可以加入外链播放器、天气挂件等等。

所以,我还是推荐大家搭建一个属于自己的个人网站。

搭建方案选择

  • Hexo框架+GitHub page、Gitee page、coding page(推荐选择)
  • Gridea软件+GitHub page、Gitee page、coding page
  • 其他框架:jekyllWordPress。。。。。。

本文主要介绍第一种方案,第二种方案也可以选取,后边会做简单介绍。

预备工作

  • 如果使用hexo框架的话,需要提前安装Git和node.js,安装过程很简单,百度就有很多教程,这里顺便贴一下下载地址:Git下载地址node.js下载地址,安装好之后在cmd中输入npm -vnode -v,如果顺利打印出版本号,则说明node.js安装成功。回到桌面,单击鼠标右键,如果出现下图红框中的选项,则说明Git也安装成功了

  • 安装好之后还要安装hexo框架,具体步骤如下:

    1. 找一个你想存放自己博客的位置,随便哪儿都行,新建一个文件夹,名字随便起,”myblogs”、”Blog_by_hexo”之类的,啥啥啥都行,自由发挥,这里以myblogs为例。

    2. 然后进入你刚才新建的文件夹,单机鼠标右键,选择Git Bash Here选项,然后在弹出的窗口中依次输入下面的命令:

      //第一条   安装hexo的基础框架,如果很慢的话,可以考虑挂下梯子,或者换个源
      npm install -g hexo
      
      //第二条   初始化hexo框架 这个可能会比较慢
      hexo init
      
      //第三条 安装所需要的组件
      npm install
      
      //第四条 编译生成静态页面
      hexo g
      
      //第五条 启动本地服务
      hexo s
      
    3. 上述指令执行完之后,会看到显示如下:

      此时本地的博客框架就搭好了,在浏览器中打开上图中的网址即可看到如下界面

博客的部署

为什么选择Gitee

博客肯定不能只丢在本地,我们得将它部署到GitHub上或者Gitee上,达到可多终端访问的目的。这里以部署到Gitee为例子,因为我用的梯子不是很稳定,怕到时候现场示范会垮掉,所以就用Gitee来做示范吧😂,况且它服务器在国内,访问速度快啊,国产版GitHub也挺好用的。进入正题:

建立代码托管仓库

  1. 首先进入码云的官网,注册一个账号,其他信息如实填写即可,注意这个个人空间地址,不要随便填,可以参考下图中的提示,自己精心想一个,想不出来就像我一样直接用名字的拼音吧哈哈哈,这个地址后续也可以修改的,大家想好了可以去个人设置里边进行修改。

  2. 注册好之后,就登录进去,然后点击右上角头像左边的那个加号(对我知道你肯定看到了),然后选择新建仓库,然后各项填写如下:

    上图中归属和路径处显示不一致,嗯我猜是码云的问题😂,没关系,只要下边仓库地址处是一样的就行

  3. 然后页面会自动跳转到刚才新建的仓库界面,选择服务选项,然后选择Gitee pages,如图:

    然后在跳转到的页面中,勾选上强制使用Https选项,然后点击启动

  4. 然后耐心的等它部署,部署完了之后可以点击他给出的网址进行访问了:

向仓库推送文件

仓库那边整好了,现在再回到本地来,通过Git Bash向仓库进行文件推送,打开你创建好的存放博客的文件夹,我的是myblogs,现在里边应该有这些东西

  1. 在编辑站点配置文件之前,我们还要安装一个插件,配合该插件我们才能使用deploy进行部署,插件名为 hexo-deployer-git,在myblogs文件下打开Git Bash,输入命令npm install hexo-deployer-git --save即可安装。

  2. 安装好插件之后我们要生成SSH添加到Gitee,还是在Git Bash中操作:

    git config --global user.name "用户名"
    // 设置提交文件时的用户名
    git config --global user.email "邮箱"
    // 设置提交文件时的邮箱
    
    //设置好之后,可用如下命令查看是否有误
    git config user.name
    git config user.email
    

    只有如上设置,你推送文件的时候,Gitee才知道是谁推送的文件,然后来生成SSH,添加到Gitee

    ssh-keygen -t rsa -C "邮箱"
    
    // 如果想自定义ssh的名字,可以这样生成一个名为test的密钥
    ssh-keygen -t rsa -C "邮箱" -f ~/.ssh/test
    

    执行之后,一路回车,出现如下界面就表示成功生成了SSH

    然后打开上图中框出的.ssh文件夹,可以看到有两个文件夹,id_rsaid_rsa.pub,前者是私有的,自个保存好就行,后者就是SSH公钥,用notepad++打开id_rsa.pub文件,将里边的内容全复制到剪贴板。(在这里推荐大家安装notepad++这款软件,体积很小,能打开的文件格式超级多,具体的安装没啥复杂的,大家可以百度。)

    紧接着来到Gitee的登陆界面,点击右上角头像,选择设置,在安全设置中选择SSH公钥,然后选择添加公钥,标题随便写一个,公钥部分就把你刚才复制的内容给贴进去,然后点击确定即可

    添加好之后,可以使用命令ssh -T git@gitee.com来验证本机是否与Gitee服务器连接成功,出现下图则表示成功了

  3. 前两步成功之后打开_config.yml,直接拉到最底下,找到deploy,这里就是我们设置推送到哪个仓库的地方。

    修改deploy选项如下:

    deploy:
      type: git
      repo: git@gitee.com:inspur-club/inspur-club.git
      branch: master
    //注意,冒号后边要有一个空格,这是yaml语法
    

    填写repo的时候,有个小技巧,我们只需要选择克隆或下载仓库,选择SSH,将内容复制下来粘贴到repo选项后即可,如下图所示:

  4. 修改好配置文件后,ctrl+s保存,然后就可以利用Git Bash向仓库推送文件啦,还是在myblogs文件夹下打开Git Bash,执行以下命令

    // 清除缓存以及public文件夹,public文件夹里的东西就是真正被推送到仓库里的东西,每次修改配置文件后都要执行该命令
    hexo clean
    
    // 生成静态页面文件,每次clean后也要重新生成
    hexo g
    
    // 向仓库推送文件
    hexo d
    

执行完如果出现如下界面则表示推送文件成功:

也可以去仓库刷新一下,如果多了很多文件,最近提交时间为刚刚,也可以说明推送文件成功:

更新Gitee pages

如果你是部署到GitHub或者coding上的话,请忽略这一步,它们俩会自动更新网站内容,只有Gitee pages需要手动更新:

更新完之后再次访问网站地址,如下:

如果你选购了Gitee pages pro,他是支持自动更新的,也可以忽略这一步,但白嫖党怎么能就此屈服,我找到了一点资料,大伙有兴趣可以去看看,戳我查看

其实我每次都是手动更新的,主要是因为我比较懒,没有经常写博客的习惯,啥时候兴致来了就写,所以每次都去点一下更新就我个人而言也还能接受😂😂😂。

如何写文章

写文章要用到markdown,这是一种轻量的标记型语言,语法超级简单,在这里就不细讲了,给大家推荐学习markdown的网站是菜鸟教程,这个网站有超级多其他教程,大家可以收藏,以后也许能用到。

总结一下

嗯,到这基本上博客的搭建已经接近尾声了,你已经拥有属于自己的个人网站了。

但其实这才刚刚开始,更重要的是丰富博客的内容,更改一些基本配置,就比如换个主题啊,给自己的网站取个名字、换个背景图等等。总之,还有很多细节需要不断去发现,不断去优化,如果你很注重细节,你会发现优化博客还是需要做蛮多事的。网上教程资源很多,希望大家善于利用。

另外说一下,GitHub是支持绑定域名的,Gitee pages就不支持(坑爹啊),新域名(.top,.club,.xyz)一般不贵,我很推荐大家买一个域名,逼格瞬间上来了有木有?

最后希望大家能在这次的分享中有所收获,回去了也可以用hexo+GitHub再搭一次,跟Gitee很类似,算是再练练手。


文章作者: Reset Ran
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Reset Ran !
  目录