howto:homepage
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
howto:homepage [2023/07/29 11:10] – created tcmal | howto:homepage [2023/09/15 10:44] (current) – Added link to next tutorial with appropriate segue andrewferguson | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ====== |
As part of your Tardis account, you get your own subdomain at ''< | As part of your Tardis account, you get your own subdomain at ''< | ||
- | For now, let's start by making | + | If you want a static homepage (one that doesn' |
- | We're going to assume a little bit of familiarity with Git, but not much with GitLab. Check the links [[tutorials: | + | ===== Simple webpages ===== |
- | ===== Logging into GitLab and making a repository ===== | ||
- | Head over to https:// | + | All you have to do is make some file in '' |
- | We'll start with a blank project so we can learn - make sure your project name is ''< | + | To test this, let's write some basic HTML. From your home directory: |
- | ===== Setting up an SSH key ===== | + | < |
+ | $ cd www/ | ||
+ | www/ $ nano index.html | ||
+ | </ | ||
- | Now we have our repository, we want to clone it locally. To do this, we need to authenticate to Gitlab in a way it understands - we'll use SSH keys because they' | + | This will open a simple text editor. You can use the arrow keys to move around. Now type or paste the following: |
- | + | ||
- | In a terminal, run '' | + | |
- | + | ||
- | Now run '' | + | |
- | + | ||
- | Now we can use our SSH key to authenticate to Gitlab. Behind | + | |
- | + | ||
- | ===== Cloning the repository ===== | + | |
- | + | ||
- | Go back to the project you've just created and click the blue ' | + | |
- | + | ||
- | Go to your command line and type '' | + | |
- | + | ||
- | ===== Making a homepage ===== | + | |
- | + | ||
- | For now, we're just going to make a simple homepage using HTML. Create a folder named '' | + | |
< | < | ||
< | < | ||
- | < | + | < |
- | <h1>Hello, World!</ | + | < |
- | </ | + | </ |
+ | | ||
+ | <h1>It Works!</ | ||
+ | </ | ||
</ | </ | ||
</ | </ | ||
- | You should come back and edit this later, adding whatever content | + | Hit Ctrl+X then Y to save and exit. Now, if you go to ''< |
- | ===== Telling GitLab | + | From here, you can start making your own site and putting actual content on it. If you don't know HTML/CSS, here are some good beginner resources: |
- | Now we have our 'site', we need to add some special steps to make Gitlab upload and serve it for us. | + | * [[https:// |
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
- | Create a new file called '' | ||
- | < | + | However, editing all the HTML files by hand, on Tardis over SSH, can get a bit tedious. A static site generator (see below) reduces the amount of HTML you need to write, or go to the [[howto:files|next tutorial]] to learn about copying files to-and-from Tardis - this way you can create and edit the HTML files on your local machine, and copy them to Tardis when done. |
- | image: alpine: | + | |
- | pages: | + | |
- | stage: deploy | + | |
- | script: | + | |
- | | + | |
- | artifacts: | + | |
- | paths: | + | |
- | - public | + | |
- | only: | + | |
- | - main | + | |
- | </ | + | |
- | If you're not familiar, this file is used to specify CI steps, which can be used for automatically testing or deploying code when it's pushed to Gitlab. | + | ===== Using a static site generator ===== |
- | Here, we're only defining one thing to do: ' | + | Programming a site by hand is great for learning, but you might find it becomes unmanageable after a bit. |
- | + | To help, you can use a tool called a Static Site Generator (SSG), such as: | |
- | ' | + | |
- | + | ||
- | ===== More ===== | + | |
- | + | ||
- | We've just used plain HTML - if this is new to you then consider learning HTML, CSS, and JS - they' | + | |
- | + | ||
- | If you don't want to keep writing HTML, consider using some kind of static site generator: | + | |
* [[https:// | * [[https:// | ||
Line 78: | Line 52: | ||
* [[https:// | * [[https:// | ||
- | [[https:// | + | You can install and use these from the sandbox VM, and put the output in ''www/''. |
- | + | ||
- | As we've mentioned, Gitlab CI can be configured to run any command, so you could even make your own custom scripts to do this - [[https:// | + | |
- | Also note that you can have multiple repositories - If you do this with a repo called '' | + | Alternatively, |
+ | [[https:// | ||
+ | You should be familiar with Git before trying this approach. |
howto/homepage.1690629010.txt.gz · Last modified: 2023/07/29 11:10 by tcmal