zoukankan      html  css  js  c++  java
  • 使用Vercel+Github搭建个人博客

    前言

    在座的各位应该都试过用Github Pages来搭建个人博客,但效果却总是不不尽如人意,访问速度太太太太太慢了。

    今天我在群里问大佬该如何做到让博客秒开,大佬给我推荐了Vercel,让我试试。我在百度上搜索,竟然找不到官网,经过一番周折后还是找到了。

    https://vercel.com/
    

    因为我的Github账号已经注册过Vercel了,注册账号的时候也没注意流程,只好引用MTR-Static大佬的图片了。

    这篇教程就当是从零开始建设个人博客吧。

    正文

    注册Github账号

    不多赘述,参考这篇教程吧。

    注册Vercel账号

    这里我用我的Github小号演示。

    打开https://vercel.com/signup,点击Continue with Github

    firefox_2020-08-28-01-47-51-1598550471.png

    出现授权页面,点击Authorize Vercel

    火狐截图_2020-08-27T17-49-26.430Z.png

    创建博客

    点击Import Project

    firefox_2020-08-28-02-11-12-1598551872.png

    接着点击Select Template

    firefox_2020-08-28-02-11-41-1598551901.png

    在模板选择页面向下滚动,可以找到Hugo,点击它,现在我们将使用Hugo来生成静态网页。

    firefox_2020-08-28-02-13-31-1598552011.png

    保持默认,点击Continue

    v2-808d1ea8ba78e0250b328b265ebb60bf_r.jpg

    点击Install Vercel for Github

    v2-7f0e7b2ad2a4d2be9b31657c937e0d33_r.jpg

    点击绿色的Install

    v2-237a6169386d6296dbafe6123450e676_r.jpg

    保持默认,点击Continue

    v2-a476f208535064ac9abe8db76a2d4559_b.jpg

    到了Create Git Repository页面,因为之前关联的是Github,所以选择Github。在Repository Name内填写你想要的仓库名称,Vercel将在Github创建一个仓库用于托管文件。Private Git Repository无论勾选与否都差不多,区别就在于创建的仓库是是私人仓库还是公开仓库,点击Continue

    firefox_2020-08-28-02-18-00-1598552280.png

    Import Project页面保持默认即可,点击Deploy

    firefox_2020-08-28-02-22-13-1598552533.png

    现在就创建成功了,点击Visit就可以直接访问。但是界面十分粗糙,接下来需要做一些个性化设置。

    firefox_2020-08-28-02-23-51-1598552631.png

    火狐截图_2020-08-27T18-50-23.903Z.png

    开始使用

    你可以到GitHub Desktop下载GitHub Desktop,相比CLI的git,配置起来更便捷。

    登录号账号之后点击File,接着点击Clone repositories

    GitHubDesktop_2020-08-28-03-00-37-1598554837.png

    找到自己为创建Hugo创建的仓库,选中后点击Clone

    GitHubDesktop_2020-08-28-03-02-46-1598554966.png

    GitHubDesktop_2020-08-28-03-04-02-1598555042.png

    打开文件资源管理器,打开C:Users你的用户名DocumentsGitHub,应该可以看到刚刚clone的仓库,此处为test

    explorer_2020-08-28-03-06-15-1598555175.png

    按照主题提供的方法做配置,我推荐even

    修改完之后打开Github Desktop,应该能看到更改,在左下角的Summary里填入做的修改(upload theme或者别的什么,有内容即可),点击Commit to master

    图片.png

    点击右上角的Push origin,把修改推送到Github。

    GitHubDesktop_2020-08-28-03-14-23-1598555663.png

    完成之后再等待半分钟,打开网站,改动应该已经生效了。

    firefox_2020-08-28-03-21-47-1598556107.png

    这是因为Vercel会检测到Github仓库改动之后会自动重新生成网页,之后更新文章可以直接在Github网页版上传到./content/posts里,比在电脑上自己生成网页再Push方便不少。

    firefox_2020-08-28-03-20-29-1598556029.png

    绑定域名

    这需要你自己有一个域名,如果不想花钱的话可以在freenom免费申请一个,这里不多赘述。

    在Vercel的控制面板里打开你的项目(如此处的test) > Settings > Domains,在输入框里输入你想绑定的域名,此处我用test.yxyy.top。接着它会提示错误,这是因为我还没有设置域名解析。

    firefox_2020-08-28-03-32-51-1598556771.png

    你需要按照提示在域名提供商那里做CNAME解析,我是在阿里云注册的域名,其他的域名注册商应该也大同小异。

    firefox_2020-08-28-03-35-23-1598556923.png

    现在回到Vercel控制面板,应该就不会报错了,它还会自动帮你申请Let's Encrypt的SSL证书。

    firefox_2020-08-28-03-37-34-1598557054.png

    真不错,可以带着域名访问了。

    图片.png


    以下为备份。

    到了Select Vercel account的页面,在下面的Personal Account内点击你自己的账户,接着点击Continue

    firefox_2020-08-28-02-16-18-1598552178.png

    可能是因为我的Github小号用的是189邮箱?无法注册。

    firefox_2020-08-28-02-05-34-1598551534.png

    引用别人的教程吧,请按照他的方法来注册账号,注册完帐号就可以回来了。

  • 相关阅读:
    iOS学习笔记(六)——ViewController
    IOS学习笔记(五)——UI基础UIWindow、UIView
    iOS学习笔记(四)——iOS应用程序生命周期
    iOS学习笔记(三)——iOS系统架构
    iOS学习笔记(二)——Hello iOS
    iOS学习笔记(一)——ios搭建开发环境
    Android UI开发第三十篇——使用Fragment构建灵活的桌面
    android实现卸载提示
    Android UI开发第二十六篇——Fragment间的通信
    Android UI开发第二十九篇——Android中五种常用的menu(菜单)
  • 原文地址:https://www.cnblogs.com/xuyiyang/p/13647069.html
Copyright © 2011-2022 走看看