Getting Started - Make a Website and Edit it with Git

STEP 1. Register and make a project for yourself.

1.A Go to gitlab.depaulhacks.com.

1.B Register.

It will only allow you to register with a `YOURNAME@depaul.edu` address. Don’t forget to confirm with your email, it will only allow you to log in for three days unless you confirm. Check your spam, it almost certainly went there!

1.C Request access to the group ‘original_hackers’.

Click Groups (left menu) > Explore Groups (top right) > original_hackers > ... (top right) > Request Access.

1.D After you’ve been added, initialize a website.

Go to Groups (left menu) > original_hackers > New Project > Create from Template.

We suggest using either Pages/Plain HTML, Pages/Hexo, or Pages/Pelican.

• Pages/Plain HTML will work out of the box and is the simplest.
• Pages/Hexo will require a local copy to alter the template and some basic modifications to work. I’ve had some issues changing the theme, so you might be stuck with default (bonus points if you can fix this!) To see the templates you can use, check out Hexo Themes. This page is made with the Hexo default theme.
• Pages/Pelican will require slightly more modification to work out of the box, but is lighter weight than Hexo. Check out Pelican Templates to see what you can make. This page is an example with a new theme.

Feel free to explore other options as well, as long as they work with Gitlab Pages.

Make your website public. Name your website first initial + last name.

If you get an error that you cannot import a project, it’s because the administrator set you as ‘Developer’ for a group and not ‘Maintainer’. Ask for a refund.

Welcome to gitlab, you’ve successfully created a project!

At this stage, your website will not be visible. However, if you push a change to the code, it will deploy. If you have an HTML site, you can make a trivial change and it should appear.

Demo in class: Make an html website. Add it to the group and name it dramsay (so we get …/2024/dramsay as the url). Add this in the online editor:

In the navbar:

<a href="https://people.depaulhacks.com/dramsay/getting-started/">Getting Started Instructions (and a Hexo Site Example).</a>
<a href="https://people.depaulhacks.com/2024/project-ideas/">Project Ideas (and a Pelican Site Example).</a>

In the header:
<h1>Welcome from David Ramsay!</h1>

Add to the <p>:
Check out the repo <a href="https://gitlab.depaulhacks.com/2024/dramsay">here</a>.

Check out BUILD > JOBS to see it process.

https://gitlab.depaulhacks.com/2024/dramsay is the gitlab repo and it appears at https://people.depaulhacks.com/2024/dramsay.

Step 2. Set yourself up to work on your gitlab project locally.

Now we want to set ourselves up to work on this locally. (This is especially true for Hexo and Pelican projects). We need to add SSH keys.

2.A Install GIT.

Follow this guide.

2.B Generate an SSH key if you don’t have one.

Check ~/.ssh/config to see if you have something in there for git. You should potentially see an IdentityFile. If not ssh-keygen -t ed25519 -C "<your_email>@depaul.edu".

2.C Add SSH key to Gitlab:

Copy the key (if you have an existing file, open it and copy it); i.e., cat ~/.ssh/id_ed25519.pub (pub is public, the non-pub is private).

Go to gitlab, Your Face > Preferences > SSH Keys > Add New Key and paste it. Hit the ‘X’ in the date so it doesn’t expire.

2.D Add new config to your local ~/.ssh/config:

Host gitlab.com-<USERNAME>
    HostName gitlab.depaulhacks.com
    User git
    IdentityFile ~/.ssh/id_ed25519
    IdentitiesOnly yes

2.E Now we’re ready to work! Go to a new directory and clone your project with git clone <Your-Repo>.

For example, I’ll open a terminal, go to my documents folder (cd Documents) and clone my repo git clone https://gitlab.depaulhacks.com/dramsay/getting-started.

2.F Modify your code! (use a code editor like Sublime or Atom, or start to learn VIM or EMACS!)

• For HEXO PAGES, now is the time to add a theme and fix things up. We need to edit _config.yaml; we can edit the title, description and author. For the url, make it 'https://people.depaulhacks.com/2024/<YOURUSERNAME>' and for the root make it "/2024/<YOURUSERNAME>". If you get these wrong, the page won’t load the stylesheets.

I still haven’t had luck changing the theme; if you can get this to work that’s great, please share how! They are available from hexo themes. You likely need to nest their theme repo in your project repo; to do this you probably need to use submodules instead of cloning their repo directly. In my case (using ‘light’), I need to run git submodule add https://github.com/hexojs/hexo-theme-light themes/light from the root directory of the project, and make sure that’s reflected in the theme line of the _config file (theme: light). We also need to change our .gitlab_ci file to add - git submodule init and - git submodule update to our before_scipt section.

This page is the example hexo pages project; compare your code to its source code.

• For PELICAN PAGES, now we need to make some big changes, especially to the .gitlab_ci file. Take a look at this example. You need to completely redo your .gitlab-ci.yml file as shown:

image: python:3.10-alpine

pages:
  stage: deploy
  rules:
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
  before_script:
    - apk add --update --no-cache git
    - pip install -r requirements.txt
    - git clone https://github.com/getpelican/pelican-themes.git .themes
  script:
    - pelican content -s publishconf.py -D
  artifacts:
    paths:
      - output/
  publish: output

Then you can change the theme in pelicanconf.py (THEME = '.themes/basic') and modify the URL (to SITEURL = '/2024/YOURNAME') in publishconf.py.`

2.G Push your code!

Now that you’ve made modifications, you have to stage them using git add . (this adds all modified files to your staged changes). Check the status of your staged changes with git status– if something looks wrong, you can git reset and add files one by one again (i.e. git add file1.py).

Now we commit them locally with a description git commit -m 'added a basic theme' and push them to the server git push.

(If you messed up your SSH, this may not work. A hack to work-around this is to change your remote to include your username, and then it will ask you for your password. If your push fails, try this from your project directory: git remote set-url origin https://<YOUR-GITLAB-USERNAME>@gitlab.depaulhacks.com/2024/<YOUR-USERNAME>.git and push again; or you can simply push this way directly (no change to remote) with git push https://USERNAME@gitlab.com/path/to/repository.git.

You’re Done, now customize it!

For more help, check out this, this, and this. This page is the example hexo pages project (source code); This is a Pelican example, (source).