Our front-end developer went against the grain, got the new site done in 1 hour, and told me "no money."

Hi everyone, I'm programmer Fishskin. Some time ago we went live with a new softwareCutting Assistant and has made an official website for the program:

Many students commented that the official website was very nice and wondered how it was done, but in fact there is an interesting little story behind this website.

Fishskin: we need to make an official website, just be able to download the app, how about a week?

Our Front-End Developers - Drink More Hot Water: One Week? You underestimate me. I'll do it in an hour!

Fishskin: Well, you're very brave, aren't you?

I thought he was joking, but I didn't realize that 1 hour later, he really showed me the results of the website, and it was much better than expected. My comment:against heaven。

He explained to me: in fact, I used a new framework, basically do not have to write their own code, and you can white-ticket platform to deploy the site for free~

Fishskin: nice, nice, go back and share it with my readers!

Thus, the following article:

For front-end students, the most used Web frameworks are React/Vue/Angular these three big things, then this article will take you to understand a new Web framework!Astroand take you by the hand to build a site of your own using Astro.Those who have used it say it smells really good!

 

On the choice of technology stack

If there is such a need, the company needs you to do a landing page of the official website, nothing else required, the interface is beautiful and can introduce the company on the line, how would you choose the technology stack?

In the past, I would have picked a language I was familiar with for rapid development, but now when you ask me what tech stack to pick, I'd probably go with Astro, why? Let me tell you why.

First of all, if you spend your own time to develop, we need to build the overall layout of the site, such as navigation bar, logo, footer, etc., but also need to consider the mobile adaptation, website SEO optimization and so on...

I don't know if you guys would find it a bit annoying? I'm a little annoyed anyway, and it probably doesn't look as good when you make it yourself...

It would be nice if the layout, adaption, SEO, and all of that matched up, and all that was needed was to change the text!

That's right, relying on Astro's robust theme ecosystem helps us do these things quickly! Products like oursCutting Assistant ( ) The official website is built in Astro, as follows:

 

It is still very good-looking, and the mobile responsive adaptation, SEO, through all to get it done, a multi-purpose!

Next we'll take a brief look at the Astro framework and then use Astro to quickly generate a site of our own!

Introduction to Astro Framework

About Astro.Official documentation (/zh-cn/concepts/why-astro)gives a very clear position: 'best suited to build something like theBlogs, marketing websites, e-commerce websitesWeb framework for content-driven websites like this"

It supports server-side rendering by default and supports React, Preact, Svelte, Vue, Solid, Lit, HTMX, and Web components, which means you can write Astro in any framework you want, a feature known in Astro as "group of islands”。

Get an Astro app fast

We are not going to introduce Astro from scratch here, so if you are interested, you can simply go through the official website.Getting Started (/zh-cn/getting-started)What we want to do is to rely on Astro's powerful theme templates to realize that you only need to change the text, write a Markdown to easily build a beautiful blog site!

1) Select a theme template

go into Astro official template site (/themes), pick a template of your choice as follows:

The template I chose is/themes/details/astro-boilerplate/ , we go to the detail page of this template and we can see that there are two buttons as follows:

The first is the source code and the second is a demo of the online effect.

We click Get Started to get the source code of the project.

2) View the README document of the template

From the README document we can learn the following information

1. How do I go about starting this program?

2. How do you build a release?

Below:

So let's follow the steps described in the README. The first step is to pull the project locally and execute the following command:

git clone --depth=1 /ixartz/Astro-boilerplate

Open this project in the editor and install the project dependencies as follows:

After installing the dependencies and starting the project, the project starts and we visit thehttp://localhost:4321 , as shown below:

OK, now we get a primitive template, which is consistent with the previous preview as follows:

3) Replacement of personal information in the project

Now all we have to do is to replace the text inside with our own information, and we can delete the information that is not there. Here you can view the file to understand the general layout of the entire site, so as to find the components that we want to adjust, as follows:

If you don't know how to adjust can also use another simpler way to find what we want to modify by searching directly for the content keywords, as follows:

Here's what my adjustments look like, below:

It doesn't look too bad, with a minimalist style in the main.

4) How to send an article

This is a blog site, so we also need to find the posting portal, we find the posts folder, in this folder to write markdown file can be, the configuration according to the existing format changes, as follows:

OK, let's try to make a post, create a new md file in the posts folder and write something in it, as follows:

As you can see, the markdown we wrote has been parsed as a post ~

At this point the site is finished, all that's left is to add content to it yourself.

Now the site we have, but also need to allow others to be able to access your site, generally to this step we need servers, domain names and so on, if not how to do?

White votes! Carry the white vote through to the end!!!

The third party services we can white ticket are:

1）GitHub Pages

2）Netlify

3）Cloudflare

4）Vercel

Wait...

We'll use Netlify as an example here, but you can learn more about the others if you're interested.

deployments

1) Create Warehouse

First we need a place where we can store our code, we go to GitHub and create a code repository and upload the code as follows:

2) Associate the repository to Netlify

go intoNetlify login page (/login)Here, since our code is on GitHub, we choose to use GitHub for login as follows:

Select Import an existing project as follows:

Import from GitHub, below:

Find the code repository where our blog is located below:

Clicking on the repository takes us to the deployment configuration page as follows:

Some key configuration instructions are listed, according to the requirements of the configuration can be, no special instructions do not need to pay attention to the current, click on the deployment and wait a few minutes to complete the deployment, as follows:

Now we visit You'll be able to see the deployed site, and the site will be built and published automatically when there are subsequent new content changes (such as posts)!

A proper one-stop shop!!! Well, that's the liver of this post, so you can get your website up and running~!

 

more

💻 Programming Learning Exchange:Programming Navigation
📃 Quick Resume Maker:Old Fish Resume
✏️ Interview Brushup:interviewer