Hosting a static website on Codeberg

PUBLISHED ON JUN 8, 2023 - UPDATED ON JUN 17, 2023

Page sections:


Overview

Did you know that you can have a website for free hosted by Codeberg? You can also use your own website domain name (but you will probably need to pay for that). All you need to know is a little bit of how gitea works and a way to create a static website. You can write one by hand in plain HTML, or use a static site generator like Hugo or Jekyll.

This website itself is hosted on Codeberg and uses my own domain name. To accomplish this I have the following items:

  1. A Codeberg account
  2. A “pages” repository on Codeberg- This is where all my static website files are saved.
  3. A “pages_source” repository on Codeberg- This isn’t necessary for the actual website to work, but this is where I keep all the Hugo related files that are used to build the static website files
  4. Git installed on my computer.
  5. The Hugo binary installed on my computer.
  6. A custom domain name and DNS settings

To get a website hosted on Codeberg you really only need items 1 and 2. You can create a “pages” repository on Codeberg and edit the files all through the Codeberg website file editors. If you are doing a very simple website this would be an easy option if you know a little bit of HTML.

This feature of Codeberg is called “Codeberg Pages”. Your website will be reachable via the URL https://[yourusername].codeberg.page. Not the most snazzy domain but it works! Codeberg also automatically takes care of SSL certificates (so https:// will work) which really isn’t very necessary since you will only be serving static content that is all publicly available anyway, but https:// is basically the standard at this point.

Creating your account and repository

Creating an account is easy and free. You can follow the First Steps documentation to get registered and learn a bit about the interface.

You should now create your first repository. Set the “Repository Name” to “pages” and hit the “Create Repository” button.

Since this is only going to host static HTML content you can disable some features. Go to the “Settings” on the repository, and under the “Advanced Settings” section disable these items:

  • Enable Repository Wiki
  • Enable Repository Projects
  • Enable Repository Packages Registry
  • Enable Repository Pull Requests

Then hit “Updates Settings”

Using git

Codeberg runs on software that is compatible with the “git” command. This command allows you to work on files on your local computer, and then when you are satisfied with all the changes you can send the files up to your pages repository. To install git follow these instructions: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git.

If you are running Windows the TortoiseGit application makes git easy to use. You would install this after installing the standard git for Windows.

Now that you have git installed you will need to create an SSH key to enable syncing your local files with the Codeberg repository. Follow the instructions at https://docs.codeberg.org/security/ssh-key/ to create and verify your key is working.

To get a copy of your repository locally you need to “clone” it. From a command prompt navigate to the location where you want your files for the repository to be saved. Then run the command, replacing <yourusername> with your Codeberg username:

git clone git@codeberg.org:<yourusername>/pages.git

Hopefully you will see something like this:

~/test# git clone git@codeberg.org:Supernova/pages.git
Cloning into 'pages'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 0), reused 0 (delta 0)
Unpacking objects: 100% (3/3), done.

OK now you should see a folder for your “pages” repository. You can use this location to add any files you want to have on your website.

Populating your first page

As a first step to creating your new website, the easiest way to test your setup is create a single index.html file inside your “pages” folder with the following contents:

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Now in your command prompt make sure you are located in the “pages” folder and can see the index.html file. If you run the command “git status” you should see that git has detected a new file. To put this new file up into the Codeberg repository online you will need to run two commands:

git commit -am "My first page"
git push

The first command will “commit” all your changes to your local copy of the repository. Then the second command “pushes” those changes up to the Codeberg site. And hopefully you can go the website https://<yourusername>.codeberg.page and see the html you just uploaded!

There is actually a lot more you can learn about git, but those two commands above are the basics of all you need to do basic editing of files locally and getting them up to your website. Here is a Git cheat sheet, but there are lots of other references to learn about git.

Using Hugo as a static site generator

TODO

Creating a private repository for your Hugo files

TODO

Using a custom domain name

TODO

TAGS: CODEBERG, GIT, HUGO