ElianCodes

← Back to blog

Deploying my website to Netlify using Github

Finding a good host for the right price can sometimes be a pain in the ass. I recently discovered Netlify and started using it for my own website and blog. Netlify has great integration with GitHub and it’s own (simple) CI/CD system.

Netlify has a free plan that doesn’t limit your options on a smaller scale. If you need more than the basics, there’s a paid plan for every need.

JAMStack

JAMStack stands for JavaScript, API’s & Markup. JAMStack is designed to be very fast since it uses pre-rendering, maintainable and scalable. Of course, this doesn’t mean you have to write your whole website in HTML, CSS & JavaScript, but you’ll need to use a bundler like Webpack or similar. NuxtJS and NextJS are common JavaScript frameworks used for static site generation.

For further reading, see jamstack.org

Deploy with git

Netlify has an easy integration with GitHub that doesn’t require any configuration except logging into GitHub. You’re also able to use another version control site like GitLab or BitBucket. With a paid plan on Netlify, you can also use self-hosted variants of those sites.

If your project is NPM based, the integration between GitHub and Netlify will be seamless and without much configuration.

Before Netlify, I used`elianvancutsem.github.io with Github Pages. It also has it’s advantages and features, but Netlify is much more sophisticated. If you want, you can also attach your own domain name to Github Pages, Netlify or Vercel (although Vercel only offers this on a paid plan). One downside of Github pages is that you’ve got to deploy a branch. So you’ll need a dedicated branch with the compiled version of your site there, whereas Netlify and Vercel build on their systems and deploy from there.

Further features

Netlify offers a lot of features to configure your website and hosting to your needs. Some of them are paid, like analytics, but I tend to use Google Analytics for that.

Forms

Netlify has a built-in form manager, which can easily be enabled. It will handle your form submitions and put them in a list on your dashboard. It’s easily accessible by adding netlify in your markup form element like the following:

<form name="contact" netlify>
  <p>
    <label>Name <input type="text" name="name" /></label>
  </p>
  <p>
    <label>message</label>
    <textarea name="message"></textarea>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

Deploy previews

One of the features I use a lot on Netlify is the deploy preview. Every time a pull-request is made on your main branch, Netlify will build a merge of the two branches and deploy a preview for you to approve on something like https://deploy-preview-57--elianvancutsem.netlify.app/. This also counts as a check on GitHub, so if the build fails, the pull request will fail that check. This feature really comes in handy in combination with something like Dependabot.

Other features

There are also a lot of features I haven’t used yet like Identity, Large Media and Split testing. Although I haven’t used them yet, I can see where they can come in handy. To read more about those, take a look here.

Written by Elian Van Cutsem

← Back to blog
  • Elians Astro Startkit

    Elians Astro Startkit

    I just published the setup I use for my personal projects. You can read more about it in this blogpost.

  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.