基于Gitee/Github搭建个人博客

基于Gitee/Github搭建个人博客

如果单纯写博客文章,CSDN、或者知乎都是很好的选择,简单易用,直接写就行。但是自己动手建立个人博客网站,不仅有趣,能学到知识,还具备非常强的可定制性。所以,就让我们好好折腾一下~

预计方案

总感觉买个服务器用来搭博客太过浪费,而且静态博客框架可以直接借助于Github Pages搭建博客,相比于动态博客框架WordPress(PHP) + 个人服务器的方案,省钱省力。最后由于网络原因,采用了国内的Gitee Pages,效果是一样的。

静态博客框架主要有以下三种可选:

  • Hexo (Nodejs)
  • Hugo (Go)
  • Jekyll (Ruby)

由于语言的原因,Hugo最快,Hexo其次。Github Pages默认采用Jekyll,但是Ruby对于我来说过于小众,不利于后期魔改,故放弃。综合来看,Hexo与前端联系密切,方便学习,相比Hugo更为成熟,故最终采用Github/Gitee + Hexo的方案。

初步尝试

首先尝试的是Github Pages,按照官方lab可以一步步搭建一个最简单的个人博客,这一套下来最方便的就是可以直接线上定制界面,上传文章等,免去命令行操作,如果不愿意折腾其实直接用官方默认框架Jekyll也挺好,集成度高。然后就要开始捣鼓Hexo了,其实上手也不难,也是直接按照官方教程安装和建站。我选择在Linux虚拟机(Ubuntu 20.04)上进行操作,后来发现并不一定要在Linux上搭建,只要安装好Git和Nodejs,Windows上也是差不多的操作。

Hexo建站

预备环境:

  • Nodejs:强烈推荐nvs,可以方便管理和切换不同nodejs版本,由于nodejs版本与很多配套软件兼容性极差,要么低了,要么高了,如果有了版本管理器,很容易就可以切换到对应的兼容nodejs版本,方便后续开发扩展。
  • Git:一行命令解决(Debian/Ubuntu)sudo apt install git,其他方式参考官方网站。

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

npm install -g hexo-cli

Hexo安装完成后,执行下列命令,Hexo将会在指定文件夹中新建所需要的文件。

hexo init 
cd 
npm install

重要配置

_config.yml

_config.yml中,基本配置就是网站的基本信息,包括网站(Site),网址(Url),或者一般都需要自定义的扩展(Extension),主题就是在扩展下面设置的,这里我采用的是yilia-plus,在yilia的基础上改进而来,增加了统计、看板娘和多种评论区,主题需要下载,可以先不设置,后面会讲。需要注意url一定要设置正确,如果网站网站存放在子目录中,例如http://example.com/blog,则需将url设为http://example.com/blog并把root设为/blog/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: 游目鱼
language: zh-CN
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://yu2014ol.gitee.io/blog/
root: /blog
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia-plus

部署配置也是需要在_config.yml中配置的,一般选用Git部署就行。一个正确的部署配置中至少要有 type 参数,例如:

deploy:
  type: git

可同时使用多个 deployer,Hexo 会依照顺序执行每个 deployer:

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
- type: git
  repo: https://gitee.com/yu2014ol/blog.git
    #repo: https://github.com/yu2014ol/yu2014ol.github.io.git
    #repo: https://gitee.com/yu2014ol/yu2014ol.github.io.git
  branch: main
- type: git
  repo: https://github.com/yu2014ol/yu2014ol.github.io.git
  branch: main

配置好就可以执行命令,一键生成站点文件并推送至远程库:

hexo clean && hexo deploy

然后会提示你输入密码,如下图:

一键部署

这里Github很可能由于网络不畅导致卡住,不提示输入用户名,我就是折腾了好久,无奈之下换了Gitee,瞬间打通了......

注意: 当执行hexo deploy时,Hexo会将 public目录中的文件和目录推送至_config.yml 中指定的远端仓库和分支中,并且完全覆盖该分支下的已有内容。

Gitee配置

Gitee中先建立一个仓库,名字可以建立一个与自己个性地址同名的仓库,如https://gitee.com/ipvb这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb.gitee.io直接访问,那么就可以创建一个名字为ipvb的仓库https://gitee.com/ipvb/ipvb。部署完成后,就可以以https://ipvb.gitee.io进行访问了。我这里创建名称是blog,所以Pages链接为 https://yu2014ol.gitee.io/blog

Gitee Pages

Gitee Pages要求先进行实名认证,人工审核一个工作日左右,审核完成后部署步骤非常简单,选择好部署分支,一键直达。
部署中

页面效果

个人主页

主题配置

如果没改主题默认页面与我的不一样,但是至少你能看到Hello World了,距离个人博客就差最后一步了——个性化定制。之前我看有两个博主都用过yilia主题,感觉还不错,于是就使用了该主题。

使用主题也很简单,在官方主题网站或者Github上搜索和查看自己喜欢的主题,最终都到对应的Github项目主页按照说明操作就好了。

主题的配置文件也是_config.yml,但这是在主题目录下的,与Hexo配置文件不是同一个。

网站图片

图片可以放在本地文件夹(themes/yilia-plus/source/img/),部署时会统一上传。不过图片一多,建议还是采用图床,我用的是路过图床,注意不要上传二维码,会被删。写这篇文章的时候,文内所有图片采用路过图床。使用也很简单,无需注册,直接上传,会给出图片链接,还有Markdown代码可选,如果你也用Markdown写作,粘到文档就可以了。

yilia的小问题

问题1 “所有文章”功能缺失

yilia主题左侧栏目中有一个所有文章的分栏,刚刚安装时点击所有文章栏目会报错缺失模块,此时按照指示进行操作就好。首先在hexo根目录执行:

npm i hexo-generator-json-content --save

然后在根目录_config.yml配置下添加如下代码,注意缩进:

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true 

最后重新部署即可:

hexo clean && hexo d

问题2 微信分享二维码无法加载

首先要说明的是,yilia-plus作者直接把微信分享代码注释掉了,应该是没有解决,后续我会提交PR,或许你们再用到的时候就不存在这个问题了。解决办法就是替换成有效的分享链接即可。
需要修改的文件为themes/yilia-plus/layout/_partial/post/share.ejs

// 去掉两边的注释符 

// ... 

扫一扫,分享到微信

// 先去掉注释,再用我现在这个链接,原有百度网盘不再支持二维码分享了 微信分享二维码

正常效果如下:

微信分享

总结

  • 国内网络不好,建议使用Gitee Pages
  • 博客框架就在Hexo和Hugo里面选吧
  • 学会用图床,直接在Markdown里面粘贴链接就可以了
  • 选一个心仪的主题,好好折腾去吧~

你可能感兴趣的:(基于Gitee/Github搭建个人博客)