The astro-paper repository by satnaing is designed as a blogging template built with Astro.
To use it as your template and integrate it with GitHub Pages, GitHub Issues,
and GitHub Actions for automation, follow these steps:
---
## Setting Up the Blog with the Template
### 1. Clone the Repository
- Fork the astro-paper repository to your GitHub account:
- Go to [astro-paper](https://github.com/satnaing/astro-paper) and click Fork.
- Clone the forked repository locally:
git clone https://github.com//astro-paper.git
cd astro-paper
### 2. Set Up Dependencies
- Ensure you have Node.js and npm installed.
- Install the dependencies:
npm install
### 3. Customize Configuration
- Update astro.config.mjs if necessary:
- Add your site’s information (like the URL and title).
- Edit or replace the placeholder content under /src.
---
## Integrating GitHub Pages for Deployment
### 1. Enable GitHub Pages
- Navigate to your forked repository’s Settings > Pages.
- Select the source for deployment:
- Set the branch where the built files will live, e.g., the gh-pages branch.
### 2. Add GitHub Action for Deployment
- Create a new workflow file to automate deployment:
#### File: .github/workflows/deploy.yml
name: Deploy Astro Blog
on:
push:
branches:
- main # Trigger deployment on the main branch
workflow_dispatch:
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: ‘18’ # Match the Node.js version used in your local setup
- name: Install dependencies
run: npm install
- name: Build blog
run: npm run build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: dist # Default build directory for Astro
- Commit and push this file to your repository.
---
## Using GitHub Issues to Manage Blog Content
### 1. Plan Your Workflow
- Use GitHub Issues to draft and store blog content.
- Create a label, e.g., blog-post, to categorize posts.
- Each issue will act as a blog post.
### 2. Automate Issues to Content Conversion
Write a script to fetch data from GitHub Issues and convert it into posts:
#### Example Script: scripts/fetch-issues.mjs
import fetch from ‘node-fetch’;
import fs from ‘fs’;
const GITHUB_API_URL = ‘https://api.github.com/repos///issues’;
const TOKEN = process.env.GITHUB_TOKEN;
async function fetchIssues() {
const response = await fetch(`${GITHUB_API_URL}?labels=blog-post`, {
headers: {
Authorization: `token ${TOKEN}`,
},
});
const issues = await response.json();
console.log(‘Fetched Issues:’, issues);
//Generate Astro Markdown Files
issues.forEach((issue) => {
const content = `---
title: ${issue.title}
date: ${new Date(issue.created_at).toISOString()}
---
${issue.body}
`;
fs.writeFileSync(`./src/content/${issue.number}.md`, content);
console.log(`Generated post for Issue #${issue.number}`);
});
}
fetchIssues();
---
## Automating Blog Updates with GitHub Actions
You can set up a GitHub Action to periodically fetch Issues and regenerate the blog:
#### New Workflow for Blog Updates: .github/workflows/update-blog.yml
`yaml
name: Update Blog from Issues
on:
schedule:
- cron: ‘0 12 * * *’ # Run daily at 12:00 UTC
workflow_dispatch:
jobs:
update-blog:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: ‘18’
- name: Install dependencies
run: npm install
- name: Fetch blog posts from GitHub Issues
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: node scripts/fetch-issues.mjs
- name: Build Blog
run: npm run build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: dist
`
This workflow will:
1. Fetch Issues labeled as `blog-post`.
2. Generate Markdown files in the content folder.
3. Build and deploy the blog to GitHub Pages.
---
## Example Workflow
1. Create a Blog Post:
- Go to your repository’s Issues tab.
- Click New Issue:
- Title: `My first blog post`.
- Body: Write content in Markdown.
- Label: `blog-post`.
- Save the issue.
2. Trigger Blog Update:
- Run the `Update Blog from Issues` workflow manually or wait for the scheduled time.
- The script will generate a blog post and deploy the updated site to GitHub Pages.
3. View your blog at `https://.github.io`.
---
### Summary of Workflow
1. `astro-paper` is used as the blog template.
2. Posts are written as GitHub Issues.
3. GitHub Actions:
- Automates the conversion of Issues into blog content.
- Builds the blog using Astro.
- Publishes updates to GitHub Pages.
Let me know if you’d like more detailed guidance for code implementation or content styling!
