再重写blog,以及新手建站教程

起因

  前段时间收到 nuxt 的推送,说 nuxt3 beta 可以用了,我便打算用 nuxt3+vue3 重新写这个博客。进行得很顺利,但是我尝试 nuxt generate 时却收到报错说 nuxt3 目前暂不支持 generate 静态站点:不支持static 不支持 static   但我重写的心已经有了,无法阻止,遂再次用 nuxt2 写了一遍sticker,等后面 nuxt3 能生成静态站点再重写吧。这次删除评论,后台等功能,3 天时间基本就写完,现在博客特别简单,年纪大了,还是喜欢简单点。之前花时间整那么多花里胡哨没卵用的东西,属实中二sticker

教程

  如果你是编程新手,以下步骤可以教你做一个和本站一样的博客,不需要花钱,甚至不需要电脑,但需要有一定的动手能力,英文阅读 or 翻译工具。我下面用小号做样例。

账号以及环境准备

  • 连接互联网的手机或者电脑,最好可以科学上网,否则下面的网址可能加载很慢或者访问不了。。。
  • GitHub 账号,注册地址:https://github.com/signup,只需要邮箱就行,取名建议用全英文,数字或连接符
  • Vercel 账号,地址:https://vercel.com/signup,选择 Continue with Github,使用刚刚注册的 Github 账号登陆即可。 选择Continue  with Github选择 Continue with Github

开始

  1. 登录注册好的 Github 账号,点击这个链接:https://github.com/yunyuyuan/nuxt2-blog,点击 fork,fork 即是以本博客项目为上游,创造一个你自己的项目。 fork项目fork 项目
  2. fork 后是这样的,点击进入 config.js 文件: 打开config.js打开 config.js 点击右上角的铅笔图标进入编辑模式,修改 githubName 为你账号的名字,我小号叫 fantasticnumber,你需要把它改成自己的 Github 名字: 修改githubName修改 githubName
  3. 其他字段,例如 title(网站标题),SEO_description(SEO 描述),你可以自己改。修改后点击 Commit changes修改后点击Commit changes修改后点击 Commit changes
  4. 进入 vercel,点击头像,进入 dashboard,点击 New ProjectNew ProjectNew Project
  5. 我们要导入刚才在 Github 上 fork 的项目,点击 Add Github Account导入导入 在新窗口中选择,选择后,滚动到下面,点击 install 按钮: 选择选择
  6. 这时已经回到了刚刚的界面,直接点击 importimport导入import 导入 此时会进入配置界面,展开 Build and Output Settings,打开第一行右侧的切换按钮,输入框内输入 npm run generate,然后点击 Deploy 按钮: deploydeploy
  7. 等待一会,Congratulations!,点击图片可以直接进入你的博客了,虽然你会发现里面的内容还是我的。。。暂时先不要关闭它。 编译完成!编译完成!
  8. 这时进入 Github,点击右上方的下拉菜单,进入 Settings设置界面设置界面 左侧菜单选择 Developer settings点击Developer settings点击 Developer settings
  9. 进入开发者设置界面,左侧菜单选择 Personal access tokens,然后点击 Genarate new token生成token生成 token 需要输入三个地方:
    • Note 填上 blog,代表这个 token 是由 blog 使用的。
    • Expiration 建议选择 No expiration,代表这个 token 永不过期,当然你也不要泄露给别人,自己最好找个地方保存(我是在微信上发给自己),万一弄丢了就得重新生成一个。
    • 下方把 repo 勾上。 输入token信息输入 token 信息 然后滚动网页到下方,点击 Generate token 按钮,此时 token 创建完成,注意⚠:这个 token 的使用者有权限修改你 Github 上的所有仓库,请勿泄露!它只会展示这一次,务必妥善保存token生成完毕token 生成完毕
  10. 进入你的博客,随便打开一篇文章,点击右上方小火箭🚀,进入编辑界面,把刚刚保存的 token 填上,点击删除,就可以删除此篇文章了,其他同理。在其它地方点击小火箭🚀有不同表现哦,试试看!sticker 删除一篇删除一篇

小结

  到此,博客基本完成了,关于博客的使用说明,可以参看使用说明。你可以把我的文章记录啥的都删除(嗯。。。有点麻烦),然后开始书写你自己的博客。后续还有一些进阶:

  • vercel 可以自定义域名,如果你觉得 xxx.vercel.app 不好,你可以购买一个域名并绑定 vercel。
  • 网站标题,网站图标,/about 界面的背景图,文字,等等其他部分均可修改,你可以自己去摸索学习,本站是使用 vuenuxt 编写的。
  • 最后,感谢你使用我的代码!如果你遇到了问题想寻求解答,欢迎给我发送邮件询问(无偿sticker),我的邮箱是:me@halberd.cn
更新于: 2022-03-17 16:23:33