Steve 分享 2023 年 2 月 28 日

Build a static blog with Apple style-Astro

Preface

I happened to see @austin2035 on the Astro blog written by the big guy, and for a while I felt that the face was durable and there was a familiar fruity smell, which was very good. The idea is to build a blog of your own. If you need a Chinese version please click 中文版本

Preview

Steve : https://blog.Steveee.me

Start building

First go to the big guy’s github and Fork the project. Project address: https://github.com/austin2035/astro-air-blog

2.Change the project name to xxx.github.io Actually xxx is your username, as shown below, the username is zxfccmm that is zxfccmm.github.io Then click Create.

3.Then you will get to the following screen, we create a new file and click Add file - Create new file

Create a new file deploy.yml in your project’s .github/workflows/ directory and paste the following YAML configuration information. “ .github/workflows/deploy.yml ```

name: Github Pages Astro CI
on:
# Trigger this "workflow" every time you push to the `main` branch
# If you are using another branch name, replace `main` with your branch name as needed
push:
branches: [ main ]
# Allows you to manually trigger this "workflow" in the Actions tab on GitHub
workflow_dispatch:
# Allow the job to clone the repo and create a page deployment
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout your repository using git
uses: actions/checkout@v3
- name: Install, build, and upload your site
uses: withastro/action@v0
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1

4.Next we click Settings - Pages - Source and select Github Actions

After waiting for a while the following screen will appear, use https://zxfccmm.github.io to access the blog home page

Of course you can also set your own domain name, set your own domain name in the Custom domain, don’t forget to add your domain name DNS CNAME to xxx(your username).github.io

You also need to add the CNAME file in the following location

5.Then we can get the following blog home page, which is already available.

Deploy using other methods

You can refer to the official tutorial in great detail.

Deployment tutorial

Customize it to your blog

|-- README.md
|-- astro.config.mjs
|-- package.json
|-- public
|   |-- favicon.svg
|   `-- static
|-- src
|   |-- components
|   |   |-- BaseHead.astro // common <head> tags
|   |   |-- Footer.astro
|   |   |-- Header.astro
|   |   `-- Navigation.astro
|   |-- consts.js
|   |-- env.d.ts
|   |-- layouts
|   |   |-- BaseLayout.astro
|   |   |-- MarkdownPost.astro
|   |   |-- MoreTile.astro
|   |   `-- Tile.astro
|   |-- pages
|   |   |-- about.astro
|   |   |-- archive.astro
|   |   |-- index.astro
|   |   |-- posts 
|   |   |   |-- some markdown post.md  // 这里写文章
|   |   |-- rss.xml.js // RSS feed
|   |   `-- tags
|   |       `-- [tag].astro // dynamic route of all posts with a given tag
|   |-- styles
|   |   `-- global.css // global styles
|   `-- utils.js

Above is the file structure of the blog

Posting articles

You need to upload the Markdown file on Posts

Customize your blog

The path is zxfccmm/zxfccmm.github.io/tree/main/src/pages/

archive.astro We can modify the tags of the article

about.astro set your about page

The path is zxfccmm/zxfccmm.github.io/tree/main/src/consts.js/

export const SITE_TITLE = `Austin's Blog`;    
export const SITE_DESCRIPTION = 'Austin Site Description';
export const SITE_EMAIL = 'no.sql@qq.com'
export const SITE_NAME = 'astro-blog.qum.cc';
export const SITE_URL = "https://astro-blog.qum.cc";

The path is zxfccmm/zxfccmm.github.io/tree/main/src/components/

Footer.astro can modify the footer

At this point, it’s a working blog.

作者： Steve 发表日期：2023 年 2 月 28 日