Home
avatar

𝒙𝒊𝒂𝒐

【开源教程】从0开始,免费拥有属于自己的博客

前言

说实话,想要搭建博客的话,有很多种方法 但多少都有一些成本(比如服务器之类的),于是静态博客就出现了

博客介绍

开源项目:vhAstro-Theme

一款基于 Astro 构建的优雅的响应式博客主题

功能特性

  • 简洁的响应式设计
  • 流畅的动画和页面过渡
  • 丝滑的阻尼滚动效果
  • 顶部Banner
  • 两列布局
  • 阅读时间
  • 字数统计
  • 代码块
  • 语法高亮
  • 图片懒加载
  • 图片灯箱
  • LivePhoto
  • LaTex 数学公式
  • 赞赏功能
  • 评论 - 内置【Twikoo、Waline】
  • 本地搜索
  • 公告
  • 标签
  • 分类
  • 归档
  • 动态
  • 圈子
  • 关于
  • 留言板
  • 友情链接
  • 推荐文章
  • 置顶文章
  • 谷歌广告
  • 侧边栏选择性展示
  • 内置 404 页面
  • Sitemap 支持
  • RSS 支持
  • 活跃的社区支持
  • 广泛的现代框架兼容性
  • 高效的性能优化
  • 优秀的开发体验

网站截图

移动端 电脑端

还是挺精美的

部署教程

  1. 安装GitHub King 这个主要是用来更方便的管理文章、文件的(需要GitHub token,软件里有教程)
  2. 在GitHub King中搜索vhAstro-Theme,长按克隆到自己仓库
  3. 回到自己仓库,编辑一些代码(不然的话部署好的就是别人的博客界面) 打开配置文件 src/config.ts ,按照以下提示编辑里面的内容(直接编辑就可以,不要删)
export default {
  Title: '博客标题',
  Site: '你博客的http地址',
  Subtitle: '博客副标题',
  Description: ' 这里写描述',
  Author: '作者昵称',
  Motto: '这里写一些你想到的很有哲理的话',
  Avatar: '头像直链(建议用图床链接)',
  // Cover 网站缩略图
  Cover: '/assets/images/banner/072c12ec85d2d3b5.webp',
  // 网站创建时间
  CreateTime: '2021-09-01',
  // 首页打字机文案列表
  TypeWriteList: [
    '首页打字机的第一句',
    "首页打字机的第二句,可以继续往后加",
  ],
  // 顶部 Banner 配置
  HomeBanner: {
    enable: true,
    cover: '/assets/images/home-banner.webp'
  },
  // 博客主题配置
  Theme: {
    // 颜色请用 16 进制颜色码
    // 主题颜色
    "--vh-main-color": "#01C4B6",
    // 字体颜色
    "--vh-font-color": "#34495e",
    // 侧边栏宽度
    "--vh-aside-width": "318px",
    // 全局圆角
    "--vh-main-radius": "0.88rem",
    // 主体内容宽度
    "--vh-main-max-width": "1458px",
  },
  // 导航栏 (新窗口打开 newWindow: true)
  Navs: [
    // 仅支持 SVG 且 SVG 需放在 public/assets/images/svg/ 目录下,填入文件名即可(封装了 SVG 组件 为了极致压缩 SVG)
    // 建议使用 https://tabler.io/icons 直接下载 SVG
    { text: '朋友', link: '/links', icon: 'Nav_friends' },
    { text: '圈子', link: '/friends', icon: 'Nav_rss' },
    { text: '动态', link: '/talking', icon: 'Nav_talking' },
    { text: '昔日', link: '/archives', icon: 'Nav_archives' },
    { text: '留言', link: '/message', icon: 'Nav_message' },
    { text: '关于', link: '/about', icon: 'Nav_about' },
    { text: 'API', link: 'https://api.vvhan.com/', target: true, icon: 'Nav_link' },
  ],
  // 侧边栏个人网站
  WebSites: [
    // 仅支持 SVG 且 SVG 需放在 public/assets/images/svg/ 目录下,填入文件名即可(封装了 SVG 组件 为了极致压缩 SVG)
    // 建议使用 https://tabler.io/icons 直接下载 SVG
    // 这里的按照他的格式可以改或者添、删
    { text: 'Github', link: 'https://github.com/uxiaohan', icon: 'WebSite_github' },
    { text: '韩小韩API', link: 'https://api.vvhan.com', icon: 'WebSite_api' },
    { text: '每日热榜', link: 'https://hot.vvhan.com', icon: 'WebSite_hot' },
    { text: '骤雨重山图床', link: 'https://wp-cdn.4ce.cn', icon: 'WebSite_img' },
    { text: 'HanAnalytics', link: 'https://analytics.vvhan.com', icon: 'WebSite_analytics' },
  ],
  // 侧边栏展示
  AsideShow: {
    // 是否展示个人网站
    WebSitesShow: true,
    // 是否展示分类
    CategoriesShow: true,
    // 是否展示个人标签
    TagsShow: true,
    // 是否展示推荐文章
    recommendArticleShow: true
  },
  // DNS预解析地址
  DNSOptimization: [
    'https://i0.wp.com',
    'https://analytics.vvhan.com',
    'https://vh-api.4ce.cn',
    'https://registry.npmmirror.com',
    'https://pagead2.googlesyndication.com'
  ],
  // 博客音乐组件解析接口
  vhMusicApi: 'https://vh-api.4ce.cn/blog/meting',
  // 评论组件(只允许同时开启一个)
  Comment: {
    // Twikoo 评论
    Twikoo: {
      enable: false,
      envId: ''
    },
    // Waline 评论
    Waline: {
      enable: false,
      serverURL: ''
    }
  },
  // Han Analytics 统计(https://github.com/uxiaohan/HanAnalytics)
  HanAnalytics: { enable: true, server: 'https://analytics.vvhan.com', siteId: 'Hello-HanHexoBlog' },
  // Google 广告
  // 一般不用管
  GoogleAds: {
    ad_Client: 'ca-pub-xxxxxxxxxx',
    // 侧边栏广告(不填不开启)
    asideAD_Slot: `<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>`,
    // 文章页广告(不填不开启)
    articleAD_Slot: `<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>`
  },
  // 文章内赞赏码
  // 自己去仓库内下面这两个地址将图片换成自己的收款码
  Reward: {
    // 支付宝收款码
    AliPay: '/assets/images/alipay.webp',
    // 微信收款码
    WeChat: '/assets/images/wechat.webp'
  }
}

还有其他页面的配置就不多说了,方式都差不多 /src/components/Aside/Aside.less的311~327行和/src/components/Aside/Aside.astro的115~126行是他流量卡的广告,可以删

项目结构

.
├── public              => 静态资源
├── script              => 命令
├── src
│   ├── components      => 组件
│   ├── content
│   │   └── blog        => 博客文章数据
│   ├── layouts         => Layout 布局
│   ├── page_data       => 页面数据
│   ├── pages
│   │   ├── about                        => 关于页面
│   │   ├── archives                     => 归档页面
│   │   ├── article                      => 文章页面
│   │   ├── categories                   => 分类页面
│   │   ├── friends                      => 圈子页面
│   │   ├── links                        => 友链页面
│   │   ├── message                      => 留言页面
│   │   ├── tag                          => 标签页面
│   │   ├── talking                      => 动态页面
│   │   ├── [...page].astro              => 首页分页
│   │   ├── 404.astro                    => 404页面
│   │   ├── robots.txt.ts                => 爬虫文件
│   │   └── rss.xml.ts                   => RSS文件
│   ├── plugins             => 插件
│   ├── scripts             => 脚本
│   ├── styles              => 样式
│   ├── type                => 类型
│   ├── utils               => 工具
│   ├── content.config.ts   => 内容配置
│   ├── config.ts           => 配置
├── tsconfig.json       => Typescript 配置
├── astro.config.mjs    => Astro 配置
├── package.json        => 依赖管理
└── pnpm-lock.yaml      => 依赖锁定文件

可以依照这个来管理(看不懂的不建议碰)

开始部署

突然发现讲了这么多废话,还没有部署到网站 这里提供两个一键部署方式,都是免费的~~(不过如果直接点这个的话,你刚刚的配置就白弄了)~~

vercel vhAstro-Theme

cloudflare page

vhAstro-Theme

这里建议Netlify

  • 先注册账号(使用github)
  • 然后创建新的项目,选择从GitHub导入
  • 如果这一步比较慢的话,可以开科学
  • 之后给他配置自定域名就可以(可选) 这样你在Github King上面做的每一个修改都会被同步到Netlify

发帖教程

首先创建一个md文档,在头部插入

---
title: 标题
categories: 分类
tags:
  - 标签1
  - 标签2
id: 文章ID
date: 文章创建日期
updated: 文章更新日期
cover: "封面图URL (为空默认随机内置封面 /public/assets/images/banner)"
recommend: false # 是否推荐文章
top: false # 是否置顶文章
hide: false # 是否隐藏文章
comment: false # 关闭页面评论(默认开启)
---

后面直接编辑你的正文内容就可以了,编辑好了之后直接通过Github King推送到src/content/blog,过2分钟就可以看到你的文章了

演示站点

https://blog.xiaow.qzz.io

后续考虑教大家怎么配置评论系统 散会~

Astro 开源 免费教程