👋 Happy to share this discussion!

In this discussion I outline how you can leverage GitHub actions to automate the deployment of a static website.

GitHub actions

According to the github.com homepage, GitHub actions make it easy to automate all your software workflows, now with world-class CI/CD.

Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

Indeed, by merging the source code into the production branch, you can easily build and deploy a static website using this method. Optionally, a code review can be conducted beforehand.

On the GitHub marketplace there is a ready-to-use GitHub action available setup-dfx-environment for deploying an Internet Computer project to the mainnet.

As a reference, I would like to mention our course “Master Deployments of Static Websites on the Internet Computer” where you can learn step by step how to implement such a deployment process for an astro website.

In Module 3, titled “Development & Deployment of a Website on the Internet Computer”, an entire chapter is devoted to this subject. We would love if you to try it out 😺.

Discussion under the viewpoint of a traditional business

Updating content on a website, whether it is a traditional web2 site or a web3 dapp, can present challenges for operators, especially in the long run.

Website owners frequently entrust their credentials to third parties such as web agencies, freelancers, or content creators for content publication when they do not manage it themselves. This practice can result in potential security vulnerabilities and unnecessary dependencies on a contractor.

With GitHub actions and some further workflow you can prevent this even in the case of the Internet Computer. Let us see how.

Why a static website?

An Astro website as an example, without Server-Side Rendering (SSR), is characterised by static, pre-generated HTML pages, as implied by the term “static websites”. This entails that any modification to the content of a static website necessitates a build and deployment process to refresh the site.

This requirement holds true regardless of whether the site operates on the Internet Computer or it is hosted by a traditional IaaS (Infrastructure as a Service) provider.

The GitHub action can serve both. However, in this article we focus on the Internet Computer.

Static websites, as opposed to content management systems (CMS), offer a distinct set of advantages, particularly in terms of simplicity, security, performance, cost, and reliability.

Here are five key benefits of opting for a static website over a CMS:

1. Speed and performance: Static websites consist of pre-rendered pages. That means there is no need to query a database or process PHP code (or any other server-side code) to generate pages at the time of a request. This results in significantly faster page loading times and better overall performance, enhancing the user experience.

2. Security: Without a database or dynamic content processing, static websites offer a smaller attack surface. They are less susceptible to common vulnerabilities that target CMS platforms, such as SQL injection or XSS (Cross-Site Scripting) attacks. This inherent security makes static websites a safer choice, reducing the need for constant security updates.

3. Reliability and uptime: Given their simplicity, static websites are less prone to errors and server overload issues, leading to higher uptime. As the content is served directly from the server or the Internet Computer, there are fewer points of failure. This reliability is crucial for maintaining access to the website.

4. Cost-Effectiveness: Hosting of static websites can be significantly cheaper than for dynamic sites, primarily because static sites require less server resources. Many static sites can be hosted on cost-effective or even free platforms that serve static files, such as GitHub pages or Netlify, reducing the overall operational costs. Also hosting a website on the Internet Computer is cost-efficient.

5. Simplicity and ease of maintenance: Static websites are straightforward to create, deploy, and maintain, especially for sites that do not require frequent updates. Without the need for complex backend systems, the maintenance workload is greatly reduced. For content updates, static site generators (like Hugo, Jekyll, or Astro) can automate the process of generating static files from source files, maintaining the simplicity of deployment.

Why to use the Internet Computer for hosting a static website?

Here are some key benefits of using the Internet Computer:

1. 100% on chain. No cloud provider. This provides complete decentralisation and removes single points of failure.

2. EU-specific subnet. For those with GDPR compliance needs, utilising the dedicated European subnet guarantees that the data is stored entirely within the European Union.

3. Content is tamper-proof. Technically speaking, the website comes directly from a smart contract. This allows 100% of online services to run from the blockchain which allows full decentralisation.

4. 100% SEO support. Given that websites hosted on the Internet Computer boast complete search engine optimization, an additional benefit can be highlighted.

5. Breakthrough performance. Low latency and high throughput stand as the crucial benchmarks for assessing performance, and the Internet Computer shines in these aspects. Differing from the majority of blockchains, the Internet Computer does not have a theoretical transaction per second (TX/s) cap. Its throughput increases linearly with the addition of each subnet, similar to the way cloud computing expands by incorporating more machines.

6. Authentication using the Internet Identity. The Internet Computer blockchain introduces an advanced, highly secure method of cryptographic authentication, transcending the traditional username and password system. This approach, which is both more convenient and enhances user privacy, functions across all user devices. It is grounded in the World Wide Web Consortium’s (W3C) Web Authentication (WebAuthn) standard and utilizes hardware-based protection for user keys.

Read more on SEO support:

What is a smart contract?

A smart contract is a stateful computer program designed to automatically execute, control, or document relevant events and actions according to the terms of a contract or an agreement. It can be deployed on the Internet Computer in the form of a canister which bundles data and code.

A canister can have one or more controllers that are permitted to modify the code of the canister, thereby modifying the terms of the smart contract.

Why do GitHub actions help?

To keep control on website updates according to our discussed viewpoint. We can employ a mix of GitHub tools to accomplish this objective. The illustration below provides a visual representation of a typical workflow.

To enhance this process, the following key features are required:

1. Branch protection rules. By implementing branch protection rules, you can authorise third parties to push new branches to the repository and initiate a pull request. The pull request allows the review of all changes made by the third party. If everything is satisfactory, the website owner can easily merge these changes into the production version of the repository by using a straightforward interface on the GitHub website.

2. Repository secrets. When it comes to updating the website on the Internet computer, a so-called developer identity is required. With repository secrets this identity can be storeed securely. Note, this key represents the private key of that identity.

3. GitHub action. If all these dependencies are present, you can create a Github Action, which automatically carries out the deployment process without having an IC SDK installed.

What is a pull request?

A pull request is a fundamental feature in version control systems, particularly in platforms like GitHub, GitLab, and Bitbucket. It facilitates collaboration among developers. It is essentially a request to merge a set of changes from one branch of a repository into another branch.

Pull requests are a crucial part of collaborative software development, enabling teams to review, discuss, and refine code before it becomes part of the main project. They help ensure code quality, foster knowledge sharing, and stream.

Wrap up

By leveraging a brief introduction to the techniques available on the GitHub website and applying a few straightforward concepts, even non-technical individuals or companies can manage the deployment process of a static website on the Internet Computer in a secure and regulated manner.

Need help setting it up?

If you have this or a similar scenario yourself, please do not hesitate to contact us.

Now you know a little bit more about the Internet Computer, Happy Coding! 🚀

Don’t forget to register to our newsletter and we’ll keep you up to date on similar exciting topics related to the use of the Internet Computer.