如何极速极速搭建个人博客?Copy攻城狮用的这一招很优秀!
摘要:在中国功夫中,“天下武功,无坚不摧,唯快不破”,在编程的世界里,如何快速搭建一个属于自己的博客呢?那么 Pagic + Vercel 应该是个不错的选择!接下来,由Copy攻城狮和您一起搭建博客!
预览地址: https://pagic.vercel.app/
本文分享自华为云社区《Pagic + Vercel 极速搭建个人博客》,原文作者:胡琦。
Pagic
Pagic 是一个由 Deno + React 驱动的静态网站生成器。它配置简单,支持将 md/tsx 文件渲染成静态页面,而且还有大量的官方或第三方主题和插件可供扩展,也就意味着您可以自由地开发定制您喜欢的主题风格或者功能插件。相比其他静态网站生成器, Pagic有哪些优势呢?
如此优秀的 Pagic 应该如何使用呢?
首先,安装 Deno :
# Shell (Mac, Linux):
curl -fsSL https://deno.land/x/install/install.sh | sh
然后,安装最新版本的 Pagic :
deno install --unstable --allow-read --allow-write --allow-net --allow-run --name=pagic https://deno.land/x/pagic/mod.ts
初始化 Pagic 项目:
mkdir site && cd site && echo "export default {};" > pagic.config.ts && echo "# Hello world" > README.md
运行 pagic build:
pagic build --watch --serve
现在您访问 127.0.0.1:8000 就能看到 「Hello world」 的页面:
Vercel
Vercel是一个用于静态站点和 Serverless 功能的云平台,完全符合您的工作流。它使开发人员能够托管网站和web服务,这些网站和服务可以即时部署、自动扩展,并且不需要任何监督,所有这些都不需要配置。
部署到 Vercel 需要我们先在项目根目录创建 deploy-vercel.sh 文件:
!/bin/sh# Install deno
curl -fsSL https://deno.land/x/install/install.sh | sh# Install pagic
/vercel/.deno/bin/deno install --unstable --allow-read --allow-write --allow-net https://deno.land/x/pagic/mod.ts# Pagic build
/vercel/.deno/bin/deno run --unstable --allow-read --allow-write --allow-net --allow-run https://deno.land/x/pagic/mod.ts build
然后在项目根目录创建 package.json :
{"scripts": {"deploy:vercel": "sh deploy-vercel.sh"}
}
Vercel 支持 Github、GitLab、Bitbucket 等方式进行登录:
我使用 Github 比较多,因此我在Github 上新建一个仓库 pagic_template :
然后将本地的代码提交到 Github:
接下来,在 Vercel 网站完成以下步骤:
- 在首页点击导入项目 (Import Project)
- 填写仓库地址,从 Github 导入要部署的仓库,点击继续
- 配置项目信息
- 填写项目名,框架预设默认 Other 即可
- 打包与输出配置,构建命令: npm run deploy:vercel 输出目录: dist (也可以根据自己的配置填写)
点击部署,等待部署完成即可访问
Blog
目前, Pagic 支持三种主题: Default、DOC、Blog,我们尝试修改pagic.config.ts 文件开启 Pagic 的博客模式:
export default {theme: 'blog',plugins: ['blog'],title: 'pagic template',description: 'Use this template to create a Pagic site with the blog theme.',github: 'https://github.com/hu-qi/pagic_template',blog: {root: '/posts/',social: {github: 'hu-qi/pagic_template',email: 'huqi@gpdi.com',twitter: 'huqii',v2ex: 'huqi',zhihu: 'fashaoge'}}
};
在上边的代码中,我们为博客配置了 Title、description等参数,其中 social ,可配置我们的社交账号,默认支持 Github、Email、Twitter、V2ex、Zhihu,当然您也可以自己开发主题或者插件来自定义您想要的。
接着我们开始完善博客中常用到的导航、分类、标签、外链等,这时我们需要添加一些目录,如about、archive、links等等,为了统一管理,我们将这些文件夹全部放置在 src目录下,我们的目录结构如下:
site
├─ dist // output
├─ src // input
│ ├─ about
│ │ └─ README.md
│ ├─ archives
│ │ └─ README.md
│ ├─ assets
│ ├─ categories
│ │ └─ README.md
│ ├─ links
│ │ └─ README.md
│ ├─ posts // maybe write somethings
│ ├─ tags
│ │ └─ README.md
│ └─ README.md // homepage
├─ README.md
├─ deploy-vercel.sh
├─ package.json
└─ pagic.config.ts
配置方面,我们增加了 nav ,并把 srcDir 设置为 src :
export default {
+ srcDir: 'src',
+ nav: [
+ {
+ text: 'Homepage',
+ link: '/index.html',
+ icon: 'czs-home-l',
+ },
+ {
+ text: 'Categories',
+ link: '/categories/index.html',
+ icon: 'czs-category-l',
+ },
+ {
+ text: 'Tags',
+ link: '/tags/index.html',
+ icon: 'czs-tag-l',
+ },
+ {
+ text: 'About',
+ link: '/about/index.html',
+ icon: 'czs-about-l',
+ },
+ {
+ text: 'Archives',
+ link: '/archives/index.html',
+ icon: 'czs-box-l',
+ },
+ {
+ text: 'Friends',
+ link: '/links/index.html',
+ icon: 'czs-link-l',
+ },
+ ],
}
在移动端, Pagic 也有不错的体验:
接着我们在 posts 目录下以markdown的形式写文章,我们可以在 .md 文件头加一些字段以便进行分类统计,如:
---
title: Pagic + Vercel 极速搭建个人博客
author: huqi
date: 2021/02/04
cover: 'https://assets.vercel.com/image/upload/v1595320886/front/home/globe-texture.jpg'
categories:
- Blog
tags:
- Deno
- React
- Pagic
- Vercel
---
编写一些文章之后,我们的博客看起来很丰富了!
此时,我们将代码提交到远程仓库就会自动部署到 Vercal,以后,我们每写一篇文章提交到远程仓库就 Vercal 就能自动部署更新,简直太棒了!
感谢多多指教: https://github/hu-qi/pagic_template
点击关注,第一时间了解华为云新鲜技术~
如何极速极速搭建个人博客?Copy攻城狮用的这一招很优秀!相关推荐
- WordPress 搭建个人博客全攻略
WordPress 搭建个人博客全攻略 概述 这几天搭了个自己的博客,用的 WordPress 因为想弄 https,然后网上的教程都没有那么全面,同时弄完了也发现关于 WordPress 启用 ht ...
- Copy攻城狮的年度之“战”|回顾2020
过去的一年,很少在CSDN上发表文章,此处留下了没有技术的眼泪(争取2021年多水一些文章).主要是感觉没啥总结的,因为本身技术实在太水,枉称为"技术人",还是习惯"Co ...
- Copy攻城狮辛酸史:含泪“一分钟”跑通MindSpore的LeNet模型
摘要:一个Cope 攻城狮用切身实例告诉你: Cope代码体验一时爽,BUG修改花半天. 前言:此文为r0.7-beta的操作实践,为什么我的眼里常含泪水,因为我对踩坑这件事爱得深沉.谨以此文献给和我 ...
- 使用 hugo oss 搭建个人博客网站
系列文章目录 文章目录 系列文章目录 前言 一.下载hugo 二.oss 三.域名 四.创建博客上传 五.发布,上传文章 前言 本文主要详解如何用最低的成本搭建个人博客网站 原本我是直接用的githu ...
- 阿里云Serverless 极速搭建Hexo博客
阿里云Serverless 极速搭建Hexo博客 阿里云Serverless 极速搭建Hexo博客 地址 开通函数计算服务 安装Serverless Devs命令行工具 安装Node.js环境. 解压 ...
- Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置
根据下面的教程搭建的博客见这里 前言 马上要进入研究生了,不能再过浑浑噩噩的日子了,搭建一个小网站,用于记录自己所学的东西.其实,之前在腾讯云1元乞丐版上也搭建过博客,但是呢,只用来扯淡了.这次使用 ...
- github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
- hexo搭建个人博客_hexo 搭建个人博客
hexo 搭建个人博客 hexo-theme-matery README Hexo BLOG 地址 iyuhp's blog 基本介绍 本 blog 使用 HEXO 搭建, MATERY 作为主题, ...
- 利用WordPress源代码轻松搭建个人博客站点
看到好友利用WordExpress和SinaAppEngin搭建了一个个人博客平台,有事没事在里面发文章,看到这里甚是羡慕,于是一直想自己也弄一个. 于是就去百度找大神的介绍教程,找来找去,发现这里的 ...
最新文章
- leetcode868
- linux 串口信息记到日志,[linux学习笔记]之一:ubuntu ch340调试备忘
- python 进程池阻塞和非阻塞_python 之 并发编程(进程池与线程池、同步异步阻塞非阻塞、线程queue)...
- 最新章节 第238章 超级计算机的安排,第238章 谁敢动我们十八里铺的人?
- 在CSS中clear属性的妙用
- Bailian4029 数字反转【进制】(POJ NOI0105-29)
- PHP+MYSQL 出现乱码的解决方法
- MFC中CString.Format的详细用法
- 选择Python科学计算发行版
- 【分享】PDF批量转JPG方法
- sql语句实现动态添加查询条件
- Servlet共享数据域cookie、session ;监听器;过滤器
- 人工智能、机器学习、神经网络和深度学习的发展历程(上)
- 【工欲善其事必先利其器】论文编辑及文献管理(Endnote,Latex,JabRef ,overleaf)资源下载及使用指南
- 面向对象程序设计中对抽象的理解
- DAZ3D导入模型设置材质
- C64+ cache资料集(更新中)
- 哈工大软件构造自我复习总结Part1
- Retrofit源码解析
- AVI格式视频转YUV
热门文章
- Kali Linux之软件安装、卸载、更新和修改更新源
- CSS3 多列布局列的填充方式column-fill属性
- CSS 块格式化上下文 BFC
- android 属性动画恢复,android – 使用AnimatorSet恢复动画
- linux基础配置脚本,Linux中selinux基础配置教程详解
- mysql active_GitHub - vipshop/drc: MySQL active-active replication solution.
- JavaScript 真值和假值
- 【知识总结】多项式全家桶(一)(NTT、加减乘除和求逆)
- python----动态规划
- Python小技巧:使用*解包和itertools.product()求笛卡尔积(转)