很多人想要搭建自己的博客网站,但是又苦于没有什么代码基础,部分同学可能觉得申请虚拟主机管理空间等操作繁琐,于是苦苦寻找那种单纯的写作平台,例如早期的新浪博客,现在的简书、国外的WP等也就成为了不少人的选择。
但是使用第三方的博客平台有一个最大的问题:不稳定。可能有的人会说大厂商不怕倒闭,纵观互联网这十几年的发展,再大的大牌服务如果没有赢利支撑,该倒闭的倒闭,该关停的关停。用户的利益对于商家来说不是高于一切。
本篇文章就来分享一个利用静态博客生成器Gridea来发布自己的博客网站,你可以将它发布任何支持Web访问的空间,这里我们以Vercel提供的免费空间来作为我们的静态博客文件发布平台,Vercel支持绑定域名,且提供免费SSL证书,是我们的理想建站平台。
![图片[1]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/59fba-Gridea-blog_00-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
一、GitHub创建仓库
网站:
- https://github.com/settings/tokens
- 演示:https://gmm.wzfou.net/
1.1 新建API
进入到GitHub的API获取页面,点击创建新的Token。
![图片[2]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/dfd27-Gridea-blog_01-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
在创建Tokens
时,名字可随意,只需勾选repo
相关权限即可。
![图片[3]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/a9bd9-Gridea-blog_02-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
1.2 新建仓库
在GitHub新建仓库。
![图片[4]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/9edd8-Gridea-blog_03-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
给你的博客项目命名。
![图片[5]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/89057-Gridea-blog_04-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
二、Gridea生成网站
网站:
- https://gridea.dev/
2.1 配置软件
进入到Gridea,下载安装。启动软件,点击远程设置,这里填写你的域名、仓库名称、分支为main、用户名为你的Github用户名、令牌就是你刚刚获取的Token。如下图:(点击放大)
![图片[6]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/360a2-Gridea-blog_05.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
2.2 开启评论
Gridea支持开启Gitalk、Disqus评论,如果要开启Gitalk评论你需要先开启授权。首先,您需要选择一个公共github存储库(已存在或创建一个新的github存储库)用于存储评论。
![图片[7]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/c6f2f-Gridea-blog_07-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
然后需要创建 GitHub Application,如果没有 点击这里申请:https://github.com/settings/applications/new,Authorization callback URL
填写当前使用插件页面的域名。
![图片[8]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/56f84-Gridea-blog_06-680x339.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
最后,你就可以在评论设置中ID和密钥了,如果Gitalk 提示 Error: Not Found,点击 GitHub 登录会返回首页。这是因为 GitHub OAuth Application 中的 Homepage URL 和 Authoration callback URL 有误,若是有自定义域名需填写自定义域名。
![图片[9]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/a8484-Gridea-blog_08.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
2.3 同步文件
点击Gridea的同步,就可以将刚刚我们设置的网站同步到GitHub仓库了。
![图片[10]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/1f85a-Gridea-blog_09-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
打开你的Github项目的main分支就可以看到你同步过来的文件了。
![图片[11]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/6bbb0-Gridea-blog_10-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
三、Vercel发布网站
网站:
- https://vercel.com/
其实Github Page就是一个免费的静态空间,但是Vercel相对于来更加有优势,一是速度更快,在亚太有节点,国内访问速度快;二是可以绑定自己的域名;三是支持自动为绑定域名生成Lets免费证书,支持Https访问。
![图片[12]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/7989c-Gridea-blog_11-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
直接在Vercel使用Github账号登录,然后选择导入你的Git,就是你刚刚创建的项目。
![图片[13]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/9eef7-Gridea-blog_12-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
选择你的账号。
![图片[14]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/6e639-Gridea-blog_13-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
确认你的项目。
![图片[15]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/aeb84-Gridea-blog_14-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
确认导入。
![图片[16]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/71a78-Gridea-blog_15-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
最后就是将你的Github代码部署到Vercel了。
![图片[17]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/48a49-Gridea-blog_16-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
打开你的Vercel二级域名你就可以看到你的博客部署成功了。
![图片[18]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/37613-Gridea-blog_17-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
四、绑域名开启SSL
本部署是可选项,对于没有自己的域名使用上面的Vercel二级域名建站也是可以的,不过购买一个域名现在已经也是白菜价了,像腾讯云、阿里云等一个域名也就是十几块钱。
在Vercel中点击设置,然后选择绑定域名,输入你自己的域名。
![图片[19]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/b92c7-Gridea-blog_18-1-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
此时,Vercel会生成一个CNAME记录。
![图片[20]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/53cc4-Gridea-blog_19-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
到你的域名DNS解析处,给你的域名添加CNAME记录。一般来是www和@,这里我以gmm来测试的。
![图片[21]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/38e5e-Gridea-blog_20-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
待域名解析生效后,你就可以使用你的域名来访问Vercel空间了。
![图片[22]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/5d623-Gridea-blog_21-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
五、自定义博客主题
网站:
- https://gridea.dev/themes
本部署是可选项,Gridea提供的四个默认的主题其实已经可以满足大多数人的写作需要了,当然为了好看你也可以选择一些网友制作的主题。(点击放大)
![图片[23]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/c92c7-Gridea-blog_22.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
点击 Gridea 左侧「系统」菜单,查看源文件夹目录,进入目录,然后将主题文件夹放入 themes 文件夹,重启应用即可。
![图片[24]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/d340e-Gridea-blog_24-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
将下载的主题文件放在这里。
![图片[25]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/58996-Gridea-blog_23-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
Gridea 有些主题提供的非常多的设置选择,比如设置背景图片、音乐、访问统计、SEO等等。
![图片[26]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/f3641-Gridea-blog_25-680x366.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
这些你都是根据你自己的需要来选择。
![图片[27]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/Gridea-blog_29-1.png?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
六、Gridea撰写博客文章
完成上面的所有配置后,你现在就可以开始使用Gridea撰写博客文章了。
![图片[28]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/Gridea-blog_30.webp?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
Gridea撰写文章还是比较简洁的,添加表情、添加图片、设置分隔符等。
![Vercel插入图片](https://wzfou.cdn.bcebos.com/wp-content/uploads/2021/02/Gridea-blog_31-680x366.png)
Gridea支持直接在线预览,撰写之后点击预览就可以看到效果。
![图片[30]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/Gridea-blog_32.webp?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
没有问题的话,点击同步一下就行了。
![图片[31]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/Gridea-blog_33.webp?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
七、Gridea同步与备份
如何你想要在其它的电脑上撰写博客文章怎么办?你仅将博客源文件夹(默认是 ~/Documents/Gridea
)通过OneDrive 、坚果云或其他类似网盘同步工具进行文件备份与同步,然后在别的电脑上替换一下Gridea的博客源文件即可。
![图片[32]-免费自建个人网站-Gridea+GitHub+Vercel傻瓜式搭建静态博客评论SSL多主题-憬瑟流年](https://cdn.bifiv.com/wp-content/uploads/2021/09/Gridea-blog_34.webp?imageMogr2/format/webp/interlace/1/quality/100|watermark/1/image/aHR0cDovL3dhdGVybWFyay1jZC0xMjUyMTA2MjExLnBpY2NkLm15cWNsb3VkLmNvbS9ydmljaC0xMjUyNDQ0NTMzLzE1ODk5MDM0NjIucG5n/gravity/southeast/dx/10/dy/10)
如何一起同步自己的静态文件?手动复制文件到博客源文件夹的 static
文件夹,构建时会直接复制到 output
文件夹。
八、总结
Gridea真的是一个非常好用的撰写博客程序,本篇文章是将静态博客文件同步到Vercel免费空间上,实际上Gridea可以通过SFTP等方式将博客网站发布到任意一个支持Web访问的平台上,这样你的博客就永远不会丢了。
暂无评论内容