SOFTWARE 9 / 20 , 2023

Novice Teaching: Make a Astro Github Blog (Astro Air Blog) topic

This article is going to be super easy.And a quick start way to teach you how to create an Astro Blog (the premise is Astro Air Blog) theme, otherwise I would surrender with both hands :D, the reason why I chose this theme, because it is clean and simple, and Apple is billed, how can I not use it?Ok, quick start, you need a three-piece kit (Node.js, Git command line, Vscode)

SOFTWARE TQGX

This article is going to be super easy.And a quick start way to teach you how to create an Astro Blog (the premise is Astro Air Blog) theme, otherwise I would surrender with both hands :D, the reason why I chose this theme, because it is clean and simple, and Apple is billed, how can I not use it?Okay, quick start, you need a three-piece kit (Node.js, Git command line, Vscode) Cut the crap, I’m writing this at 02:56 am, trying to find the easiest way to teach it out!

After the above three downloads are completed, officially enter the teaching!

First, let’s go to the warehouse and build a new library https://github.com/austin2035/astro-air-blog

Enter the warehouse name casually, but in the end it will change :P

Go to the warehouse you just set up, then find HTTPS, etc to download

Let’s open the command line, this time to type

git clone (this is the URL you just got)

as I have just been to https://github.com/tqgx/blog.git
that is, the git clone https://github.com/tqgx/blog.git

When finished, it will help you automatically save in the Administrator folder, called (blog), because my warehouse name is Blog

You can pull it straight into slot C, or change the name, whatever.

If not, we can just type cd blog on the command line

This means that the switch is correct, and then we enter: npm install

Then after it runs, type: npm run dev (remember this command, you will need to use it later to test the blog, or update it, sometimes a small bug causes the blog not to be built)

Then it pops up at https://localhost:3000/ and goes straight to the browser, and this is what happens

~~ Because I have done the Settings, so don’t ask why it is different ~~ Ok, then if you’re done, look through it a little bit, just press CTRL + C twice on the command line and leave.

After logging in, we can then upload things through vscode, and then upload blog posts by it

Open VSCODE and throw the entire blog folder directly into it

Then you will see such.MD articles, this is the article you want to blog about
But nothing else is important, the details of the parameters are discussed later, we want to set up the blog top priority. Go to TERMINAL and type git remote -v

Open this way.

This will show all your git uploads, but it’s definitely not correct anyway
You see origin at the top?We’re going to delete it Enter git remote rm origin

Delete whatever is called in the first place. If it is master, type git remote rm master instead

Next let’s add a new screen name for Github.io (this is also the name of your website after you)

https://github.com/new

Rule: What’s your first name, like my name is tqgx
I must enter the Repository name tqgx.github.io (otherwise your github.io can not be created)

For your own Github.io link, type:

git remote add origin https://github.com/yourname/yourname.github.io.git

Big eyes, please replace the above yourname place with your own
example: git remote add origin https://github.com/tqgx/tqgx.github.io.git

From the Git command line, upload all the files from the previous blog

Input:

git add -A
git commit -m “first commit”
git branch -M main
git push -u origin main

(Next, wait two to three minutes, the website will be ready!)

Enter the URL in your browser: https://tqgx.github.io/

For this part of the website, change tqgx to your name.For example, if my name is John, I will type https://john.github.io/

Finished!Thank you for reading

Then use vscode to delete some files and commit with the built-in stuff.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Here are some extras: (Please look closely at the top of the image,.mdr is the file directory, or.js)

One of the advanced Settings: set the home page article display

By default, the home page is listed in reverse order of when the article was created.You can edit the src/pages/index.astro file to change the way the articles are displayed on the front page.There are three types of article layout, the first is to show one article in a row, the second is to show two articles in a row, and the third is to show three articles in a row.As shown below, we can set the number of articles in these three layouts.

Here allPosts indicates all posts, and slice(0, 1) indicates starting with the first post and ending with the second post (but not including the second post).In this way, we set up the first layout that shows the latest articles.Similarly, we can set the number of articles in the second layout and the third layout.The ones I set here are slice(1, 5) and slice(5, 11).In this way, we set up the second layout to show articles 2 to 4, and the third layout to show articles 5 to 10.The same goes for the Settings of more articles.

Setting of “More articles” in the home page

How to insert: Like the Back key of my article?

also in the SRC/layouts/MarkdownPost. Astro, the space reserved place place, insert the following code: `
```
<ul>
</ul>
<div>
  <a href="/">Back</a>
</div>
```

How to insert: Disqus message Board?

Also in SRC/layouts/MarkdownPost astro into this article teaching: [insert Disqus comments - to the Astro - air - blog theme] (https://tqgx.github.io/posts/1/)

Some content references: Astro Air Blog Detailed usage guide

https://yufengbiji.com/posts/astro-air-blog-guide

Utteranc

Giscus

Thanks for your reading. You are welcome to share articles of TQGX's Blog (tqgx.github.io). Please include the original URL when reprinting or citing articles, and abide CC BY-NC-ND 4.0 license. For commercial use, please write an e-mail to me.

Back