Fast Static Sites with Netlify and AnyMod

It takes only 10 minutes to easily build a static website workflow.

You will get the following advantages:

• Free HTTPS
• Free or low-cost hosting
• Build a website quickly
• Real-time reload edit
• Even if you forget everything after 6 months, you can edit it easily

Start: Register

We can do all this by using Netlify (very simple static hosting) and AnyMod (hundreds of website modules).

• Netlify Registration
• AnyMod registration

Set up a deployment pipeline

We will create a basic HTML file, track it using GitHub, and then deploy it automatically using Netlify.

(If you prefer manual settings, you can skip this step and instead deploy the files to the Netlify folder by dragging and dropping.)

1. Create an empty repository on GitHub.

Visit https://github.com/new and name it netlify-anymod:

2. Connect Netlify to your repository.

You can do this on the Netlify launch screen.

3. Create a folder on your computer and add a file named index.html.

You can do this by running the following command in the terminal:

 <code>mkdir netlify-anymod cd netlify-anymod touch index.html</code>

Now edit the index.html file to add some basic HTML structure:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Netlify & AnyMod | CSS Tricks</title>


  Hello, World!

4. Tracking with git and deploying to GitHub

 git init
git remote add origin https://github.com/tyrw/netlify-anymod.git
git add -A
git commit -m "Initial commit"
git push --set-upstream origin master

Note: Replace the URL in git remote add origin with your own repository URL.

Check your Netlify URL in about a minute and your website should be online!

Add module "mods"

Now that we have set up the deployment, we can build the page itself. We will use ready-to-use modules ("mods") on AnyMod.

There are many modules to choose from, but we will use modules from the Editorial theme:

navigation

(View this module)

Introduction/Hero Unit

(View this module)

Form

(View this module)

Image gallery

(View this module)

Clone and add modules

Add these modules by clicking on "Clone" of each module, then scrolling down and copy/pasting the installation code into the index.html file. Also copy and paste your project script to the top.

Your index.html should now look like this:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
  <script>
    (function (m,o,d,u,l,a,r,i,z,e) {
      u[m]={Project:o,rq:[],Opts:r,ready:function(j){u[m].rq.push(j)}};function j(s){return encodeURIComponent(btoa(s))};z=l.getElementById(m '-' a);r=u.location;
      e=[d '/page/' o '/' j(r.pathname) '/' j(r.host) '?t=' Date.now(),d];e.map(function(w){i=l.createElement(a);i.defer=1;i.src=w;z.parentNode.insertBefore(i,z);});
    })('AnyMod','82PEPN','https://cdn.anymod.com/v2',window,document,'script',{ toolkit: true, tips: true, priority: 3 });
  </script>
  <div data-anymod-mod="navigation"></div>
  <div data-anymod-mod="hero"></div>
  <div data-anymod-mod="form"></div>
  <div data-anymod-mod="image-gallery"></div>

The page is ready.

Now save and push to GitHub to deploy the website:

 git add -A
git commit -m "Added mods"
git push origin

Wait for a minute and your website should be ready to use. This is a demo page.

View the demo

Edit content

Now you can edit the content and code of each module in real time. When viewing your own page (also logged into AnyMod), you will see a pencil icon on the right:

Click the pencil and select a module. Now try to do some editing to the content (or code) and note that it will automatically update in real time on the page.

You can use this method to edit immediately, or edit it after 6 months when you forget the project settings.

Form

The form will also work automatically. Try submitting a message on your own page; the reply will be emailed to you immediately.

in conclusion

You now have a great way to build a fast, reliable, and secure static website.

Remember: the greater the ability, the greater the responsibility.

The above is the detailed content of Fast Static Sites with Netlify and AnyMod. For more information, please follow other related articles on the PHP Chinese website!