How to Publish a no-code website in 10 minutes
Easy way to publish a modern looking web site non-tech people can manage and update. All for free!
Last updated
Was this helpful?
Easy way to publish a modern looking web site non-tech people can manage and update. All for free!
Last updated
Was this helpful?
In this article, I'll introduce a no-code, no-software and no-cost solution to publishing sophisticated web sites managed by non-technical people. The full codebase is .
Sir Issac Newton discovered the law of gravity when practicing “social distancing” during the Plague. What will YOU do? One silver lining of quarantine is that all this free time brings out the entrepreneur spirit and creativity in us.
However, especially because of the quarantine, now more than ever, any new idea or project must have a web site. Traditional CMS solutions like Wordpress, Squarespace, or Wix are difficult to use, look dated, are expensive, or all of the above!
We wanted to create a web site that has a sophisticated look and feel, yet is easy to customize. A non-technical person should be able to edit the source files and see the changes appear on the live web site in a few minutes. Ideally, it should also be free (forever free, not just free-for-now), and can scale to handle millions of visitors if it becomes popular.
Is this possible?
In this short article, I will walk you through a solution based on the Hugo framework, GitHub Pages, and GitHub Actions. You can get up and running with your shiny new website by the end of this article.
It is so easy that my 9-year-old son did it. He now manages a web site for his fictional country called . Check out the .
If you just want to get started with a working web site as soon as possible, first make sure that you have a free GitHub account.
to your own account.
Go to your forked repository, and click on the Actions tab. You will see a message like the one in the picture below. Click on the “I understand my workflows …” button.
Go to the Settings tab of your repository, and then scroll down to GitHub Pages. Re-select the gh-pages from the dropdown for the web site to build.
Go to the Code tab of the repository, open the config.toml file, and edit it. Change its title attribute to something else, and click on the “Commit changes” button at the bottom. We need this step to trigger the workflow at the new repository.
Wait a few minutes, go to the “published at” web address at GitHub Pages and you will see the template web site.
That’s it for the quick start! In the next several sections, I will explain in more detail the concepts and processes.
Older generation CMS solutions like Wordpress are too difficult to adapt to new web site designs, and commercially hosted solutions like SquareSpace are too expensive and not flexible enough. Static web site generators like Hugo offer a good balance among features, flexibility, and ease of authoring.
Hugo web sites can be customized and modified through configuration files.
New pages and content sections can be written in markdown instead of HTML. That makes content authoring much easier.
There are many modern design themes to choose from.
The output of Hugo is a static HTML web site that can be deployed on any low-cost hosting provider.
Together with static web site hosting services like GitHub Pages and Netlify, they can offer a completely free solution.
Here is how to do it.
Find one you like, download a zip package or clone a GitHub repo, and unpack the theme into a folder. Let’s assume that the theme distribution is unpacked into a folder called my-theme. The following are commands in a Linux terminal. You could use the Terminal app on Mac or PowerShell on Windows.
Next, create your web site project directory on your computer.
Copy the theme folder into your project.
Next, copy the theme’s exampleSite to the project’s top-level directory.
Edit the config.toml in the project root directory my-site/ to point to the right theme.
For a Hugo-based system to be useable to a non-developer (or a young developer who has yet to master the command line tools), we must automate the process of building and deploying the static web site.
In the GitHub project, go to Settings and enable GitHub Pages. Select the source to be the gh-pages branch.Settings, GitHub Pages
Next, we create a GitHub Actions workflow to run the Hugo command on the source files from master branch, and push the generated HTML files to the gh-pages branch for publication. From the project’s Actions tab, click on the “set up a workflow yourself” button.Set up a workflow yourself
The workflow is stored in the master branch as .github/workflows/main.yml file. The content of the file is as follows.
Now go to the web site, and you should see the theme’s default web page.The HugoSerif template for one of our web sites.
h
The web pages are authored in markdown format and the md files are in the content folder.
Each md file has a header section with properties such as the page’s menu placement, priority, timestamp, excerpt, etc.
The overall configuration, such as the menu items and properties used by multiple pages, are stored in the data folder.
Static content such as raw HTML files, JavaScript files, and image files can be placed in the static folder.
In particular, here is how you customize the Ananke theme that comes with our template:
If you are interested in learning more and see how we did it, you can watch our progress at
Good luck and stay healthy!
Next, you can customize the site by editing the config.toml file and the files in the content folder. Go to the “Add your own content” section at the end of this article to see how. You can check out .
The Hugo software distribution is on all major operating systems. You can . But, since we will use GitHub Actions to automatically build our Hugo web sites, we do not actually need to install Hugo software here.
First, select a Hugo theme. There are . Some are geared toward web sites with one or more content web pages, while others are optimized for blog-like sites with timestamped posts.Hugo themes
Next, create a GitHub repo called my-site, and push the my-site directory onto its master branch. Here are the steps for . Now we are ready to publish the theme example site.
What happens here is that the web site authors and editors will change content and files on the master branch. Whenever new content is pushed to the master branch, the automated GitHub Actions workflow will , run the hugo command, and turn those files into HTML files for a static web site.
The HTML files are to the gh-pages branch of the same repository. They will be published on the specified web address by GitHub Pages as configured.
Notice the cname attribute in the last line. That is the we set up with GitHub Pages. If you do not have a custom domain name, just remove this line, and you can access your web site at the domain provided by GitHub Pages.
To change the default theme web site to your own content, you just need to change the files on the master branch. Please refer to the of your selected theme. In general, Hugo templates work like this:
The file allows you to configure the website title, social icons on all pages, and the big featured image on the home page.
All images should be uploaded to the folder.
The file contains the text for the home page.
To add pages to the site, you can just create files in the folder. An example is the file. Notice that at the top of the file, there are attributes to control whether this page should be on the website menu.
To add articles to the site, you can create markdown files in the folder. Those are blog-like content articles that have dates and titles at the top. The most recent two articles will show up on the home page.
The Country of Arenztopia [] []
Second State blog [] []
