Guide Using Github with Netlify to Streamline the Process

[Nick]

A popular post of mine here on the forum is about using Netlify with Cloudflare to host your landing pages for free. They’re fast, and using the user interface(s) is relatively easy.

That’s great, but what if I told you it can get even better?

In this thread, I’m going to show you how you can add Github into the mix, allowing you to never have to visit Netlify (or Cloudflare) when you change or upload new files.

Note: this guide is assuming you are using VS Code as your code editor. If you’re not, I can’t help you.

Making a Github Repository​

For this example, I’m going to have a single landing page (the “iphone” folder), within my main “project” folder called GITHUB-NETLIFY-EXAMPLE.

When I say project, I mean the main folder that holds all of your landing pages. This main folder can have one folder with a landing page as I have, or literally hundreds of folders each containing a different landing page. The choice is yours.

Now we’re ready to turn this folder into a Git repository.

With your project open, in the main menu of VS Code:

1. Navigate to the Terminal menu
2. Click New Terminal

Your main window should split and you should see the terminal:

If you look at the text in the terminal, it says blurry stuff github-netlify-example.

Note: This next part may require installing Git to your machine. I can not and will not provide any support regarding this because it’s far too time intensive to figure out what your machine is, your OS, and all the jazz. If that's too complicated, then you might just do this instead and move your files as need. If you do that alternative option, the following steps will be slightly different.

That’s the name of the computer I’m using, and the folder this terminal is in (my project folder). Now we can type the following command:

git init

You might see some scary yellow text, but that doesn’t matter. The repo was initialized, which is all we need.

Download Github Desktop​

If you’re skilled, you can just use Github 100% with the terminal, but since I’m not I’ll be showing you how to set this up with Github Desktop, which gives you a visual interface. This way, you don’t have to remember all these “git …” commands and accidentally do something you didn’t want to in the terminal.

If you don’t already have a Github account, go create one now.

Next, download the Github Desktop app.

Open the app and in the GitHub Desktop drop-down menu, click Preferences. In the preferences window, click Accounts and follow the steps to sign in.

Once you've successfully signed in, in the drop-down menu:

1. Click File
2. Click Add Local Repository

Find the folder your project is in and then click Add Repository.

You should then see your project and all of the files Github recognized.

Since I’m on a MAC, Github recognized the hidden .DS_Store file, which I don’t want to add to Github.

You can either uncheck the box in front of it or add a file to your project’s root folder called .gitignore with the name of the file in it. I’m going to do the latter so I don’t have to uncheck that box every time I want to push changes in my project.

After adding the .gitignore file to my project, you should see it in the Github desktop app and the .DS_Store, or whatever other file(s) you want to remove disappear.

Click Publish Repository in the top right corner (see screenshot above).

Change the name if you want your project in your Github account under a different name, and make sure to check the “Keep this code private”… otherwise it’ll be displayed publicly for anyone on Github to see.

Click that blue button labeled Publish Repository.

Oops. It didn’t work. You probably got the error, “Cannon publish unborn HEAD”.

With Github, you have to “commit” your changes before you can publish them. Let’s do that.

In the lower left-hand corner, there’s a summary and description you can fill in. The summary is required and is like a quick note of what you did. If you’d like to write a lot of detail about what you did so you can reference it in the future you might use the description.

I personally just use the summary.

With at least the summary filled in, click Commit to master.

Now you can publish it again as I showed you above. If all goes well you should see it in your Github account.

Creating a Netlify Site from Your Github Repo​

Now let’s make a site in Netlify using that Github repo we just created.

Inside your Netlify account on the main page after logging in click Add new site and Import an existing project.

Select Github and do the authorization.

Select your repo:

Most people won’t have to do anything on the 3rd step except click Deploy site.

My “site” was deployed in 8 seconds. It’s usually quite fast.

Now, if you want to add a custom domain, I’ll ask that you reference my original post, as it’s all the same.

The only difference now is that when you push any changes to your Github repo, your site will be automatically redeployed on Netlify with those changes. However, since we’re using Cloudflare, the cache will still need to be cleared... manually

Let’s make that automatic too…

Auto-Purge the Cloudflare Cache​

On your site’s page inside your Netlify account, navigate to the Plugins page with the menu at the top:

Then click Go to the plugins directory.

Find the plugin, Cloudflare Cache Purge, and click Install.

Now you’ll need to configure the plugin.

The following was taken from the plugin’s docs:

From Cloudflare, you'll need:

• Your Zone ID. Go to your Cloudflare dashboard, enter your website, and look in the bottom right-hand corner under 'API'.
• An API Token

API TOKEN - Instructions for creating new Cloudflare API Token​

1. In Cloudflare, navigate to My Profile --> API Tokens
2. Click Create Token Button
3. Click Custom Token Section --> Create Custom Token --> Get Started Button
4. On the Create Custom Token Page:
   • Token Name --> Netlify Purge Cache Token (or anything other name that is meaningful to you)
   • Permissions --> Zone --> Cache Purge --> Purge
   • Click Continue to Summary button
5. Click Create Token Button
6. Record the API Token to your password safe of choice. This is the last time you will have an opportunity to see this token.

API TOKEN - Instructions for configuring Netlify​

In Netlify, go to Settings -> Build & Deploy -> Environment -> Environment variables and set up:

• CLOUDFLARE_ZONE_ID
• CLOUDFLARE_API_TOKEN

If you’ve configured this correctly, the next time you push your updated code to Github, you should see a similar message in your Netlify deployment log indicating the Cloudflare cache was cleared.

Boom!

Now you can spend more time doing other things than wasting time moving files around, clearing caches, and making mistakes in the process.

Just push your code to Github, wait about 10 seconds, and everything is updated.

 

[cdm]

For hosting static sites, just use Cloudflare pages and skip netlify altogether.

No point adding netlify when Cloudflare can already do what netlify can on it's own.

 

[Nick]

For hosting static sites, just use Cloudflare pages and skip netlify altogether.

No point adding netlify when Cloudflare can already do what netlify can on it's own.

Right. I use Cloudlfare pages for some things, but this is a continuation of the previous tutorial. At the time that tutorial was made, Cloudflare pages didn't have nearly close to all of the features it has now. Github was the only option to put files on Cloudflare back then.

 

[Pablo T]

Great guide, Nick. Very useful. Thanks.

I would like to add the steps to push the files to Github, because it wasn't straightforward to me, and this may help others...

After saving the changes on your files in VSC, you get an alert on the 'Source Control' icon on the left that tells you there are changes not synchronized yet in Github.

Click on

and you'll arrive here . Now, click on the check button:

Now, a message box will open for you to write a"commit message". It can be anything to remember the changes you made at this time. Press 'Enter'.

Finally, click on 'Sync Changes' button, and you're done!

wait about 10 seconds, and everything is updated.

Note: @Nick , any correction would be appreciated.

 

[Nick]

Great guide, Nick. Very useful. Thanks.

I would like to add the steps to push the files to Github, because it wasn't straightforward to me, and this may help others...

After saving the changes on your files in VSC, you get an alert on the 'Source Control' icon on the left that tells you there are changes not synchronized yet in Github.

View attachment 28754

Click on View attachment 28755 and you'll arrive here . Now, click on the check button:

View attachment 28762

Now, a message box will open for you to write a"commit message". It can be anything to remember the changes you made at this time. Press 'Enter'.

View attachment 28757

Finally, click on 'Sync Changes' button, and you're done!

View attachment 28758



Note: @Nick , any correction would be appreciated.

@Pablo T, glad to see you implement this. It's a huge time saver once you get used to using it in your workflow.

That's one way you can push the files to Github, but I personally do it differently.

As soon as you save the files, Github Desktop will recognize the changes. You can commit them (just like how you created the repo) and then push them from within the app. I find it easier like this than the built-in stuff in VS code.

 

[Pablo T]

Thanks, Nick! I'll try it your way.

This guide is definitely a huge time saver. I recommended it to everyone using Netlify.

 

[asta7064]

Right. I use Cloudlfare pages for some things, but this is a continuation of the previous tutorial. At the time that tutorial was made, Cloudflare pages didn't have nearly close to all of the features it has now. Github was the only option to put files on Cloudflare back then.

Hi,Nick,I want know how to use cloudflare,use R2? Because AWS needs approval now, but I won't operation
R2.

 

[BobZhang]

This is really a great guide, I did it

 

[Nick]

Hi,Nick,I want know how to use cloudflare,use R2? Because AWS needs approval now, but I won't operation
R2.

If you want an alternative to AWS S3 static hosting just use Cloudflare Pages or the Netlify tutorial linked above. Using R2 is likely overkill and unnecessary.

 

[MacMan]

For hosting static sites, just use Cloudflare pages and skip netlify altogether.

No point adding netlify when Cloudflare can already do what netlify can on it's own.

Disagree. Pages don't have build in Plugins, so you can't easily and automatically obfuscate all JS scripts with Pages as Netlify can do in 2 clicks.

 

[Nick]

Disagree. Pages don't have build in Plugins, so you cant automatically obfuscate all JS scripts with Pages as Netlify can do in 2 clicks.

You can pretty easily add that in with a build script though.

 

[MacMan]

You can pretty easily add that in with a build script though.

 

[MacMan]

You can pretty easily add that in with a build script though.

Thanks @Nick for a tip.

 

[Nick]

Okay, figured out. In fact, everything turned out to be really simple. But for understanding I had to resort to studying the javascript-obfustator/CloudFlare Pages manuals. Well, I've gotten smarter.


To obfuscate all js code for all js files on website, need to add this build command:
npm install -g javascript-obfuscator && javascript-obfuscator ./public --output ./public

where public is folder with lps.


Thanks @Nick for a tip.

I suppose that's another way to do it.

I myself run a node.js script that builds + optimizes the landing pages. It also uses the javascript-obfuscator package.

 

[MacMan]

I suppose that's another way to do it.

I myself run a node.js script that builds + optimizes the landing pages. It also uses the javascript-obfuscator package.

Yeah, there a lot of ways to do that, I have already changed my way May you please share what kind of optimisations do you do? Just interesting what to apply to mines

 

[LQQ]

I use cloudflare to deploy landing pages, it occurs some issues as below, the latest 2 productions display the same content.
Steps:
I upload a file to local GitHub repository>>> I fetch orgins>>> File is uploaded to Cloudflare.
However the LP is not the latest I upload, instead, it was an old LP I uploaded before.

I wonder what happened in the whole process?

 

[Nick]

I use cloudflare to deploy landing pages, it occurs some issues as below, the latest 2 productions display the same content.
Steps:
I upload a file to local GitHub repository>>> I fetch orgins>>> File is uploaded to Cloudflare.
However the LP is not the latest I upload, instead, it was an old LP I uploaded before.

I wonder what happened in the whole process?

Not sure. You could try clearing the domain's cache and opening it with an incognito browser.

 

[MoonMoonBird]

On this way , if i add GTM to the main page, the othe page didnt add Gtm code when load, any way to solve it?

 

[Nick]

On this way , if i add GTM to the main page, the othe page didnt add Gtm code when load, any way to solve it?

If the page doesn’t have the GTM tag it won’t be present on the page just because another page has it.

 

[MoonMoonBird]

If the page doesn’t have the GTM tag it won’t be present on the page just because another page has it.

is there some way to 'connect' the page ? I use wordpress befefore and if i add it to the main page ,the whole site page will load it . I guess on this way all the page are 'independent'?