Skip to content

How to edit the website

Jump to bottom
Giorgio Bonvicini edited this page Oct 19, 2021 · 2 revisions

The IML website is written in simple HTML and CSS code. All files can be modifed with a simple text editor and the website is served directly from this GitHub repository, so when a new version is pushed to the master branch of the remote repository the site is automatically updated to show it.

To know how to edit it please read this short chapter (How to edit the website). All the other chapters are not strictly required, but provide further details which might be useful if you are trying to obtain certain things. The sections chapter contains lots of codes which can be practically copy-pasted to add various elements to a web page.

HTML and CSS

HTML is a markup language (similar to Markdown, used on GitHub, and, in a sensem to LaTex). It's a code that lets you write the structure and the content of a webpage. HTML by itself only provides the skeleton of the page: the style (spacing, colors, dimensions, fonts etc) are added by CSS.

HTML and CSS are not difficult to learn: here and here you can find two valid tutorials that should introduce you to most basic concepts of HTMl and CSS respectively.
Note that you don't have to follow the full tutorials since most of the code for the website is already written and even your personal page can be assembled just by copy-pasting some blocks of code which you will just fill with your content. Still, to avoid errors and problems, a basic understanding of at least HTML is really useful (you can use the tutorial as a reference and look up just the parts that you need along the way).

Procedure to edit the website

If you are familiar with git and GitHub: to edit the website you have to fork the website repo, edit it locally (python is required: check step 4), then submit a PR request.

If you don't know how to do any or some of this, you can follow these instructions:

  1. Fork the respository. Log in to GitHub with your account, open the website repo and click on "Fork" at the top right. This will create a new repository under your account which you will be free to edit without affecting the main website.
  2. Clone the forked repository to your PC: git clone https://github.com/YOURACCOUNT/imanlab.github.io.
  3. Access the folder where you cloned the repo in a terminal: cd path/to/imanlab.gihub.io.
  4. Start a local webserver to show the local copy of the website: python3 local_webserver.py). Note: the server will stop when you close the terminal.
    If you get an error try changing the port number (should be greater than 1024) by running python3 local_webserver.py PORT_NUMBER.
  5. You should see a link in the output of the terminal (usually http://0.0.0.0:8000/). Copy and paste it in your browser: you should now see the website.
    Note that this is not the actual website, but a copy of it, based on the files that you have on your PC. You can change anything without fear of breaking things or messing up.
  6. Leaving the browser and the terminal open you can open the file(s) that you want to edit in a text editor of your choice (most IDEs will automatically recognize HTML and CSS and provide syntax highlight, which is useful).
  7. Edit anything you want, delete or add files: you will see the effects of your changes in the browser if you refresh the page.
  8. Once you are satisfied with your changes commit them and push your commits to your forked repo.
  9. Open you forked repo on GitHub, open the "Pull request" tab and click on the green "New pull request" button.
  10. At the top make sure that the original website repository is chosen as base, while your forked repository is chosen as compare. You will see here a summary of the changes you are submitting.
  11. If everything looks OK go ahead and click on the green "Create pull request" button.
  12. Choose an appropriate title and description for you pull request, then submit it. Someone with write access to the website repo will soon check it and if everything is fine your changes will be merged in the public website.
  13. You can delete your forked repository now.

Creating a new page

If you are editing existing page you can just go ahead and do it, but if you are creating new pages (e.g. new personal pages for new team members) you should not start from scratch: the files /00_page_template.html and /team/00_personal_page_template.html contain the bare minimum "boilerplate" for a new page. You can then expand starting from there.

More detailed info on this boilerplate code can be found in the "General file structure" page.

So, if you are creating a new page you should:

  1. Copy the template file (/00_page_template.html or /team/00_personal_page_template.html) to the directory where you want the new page to be.
  2. Rename the copy as you desire (remember to keep the .html extension).
  3. Open the new file in a text editor of your choice, change the <title> tag, insert the content in place of <!--CONTENT GOES HERE--> and do any changes that you like.

If you are adding a new team member's personal page don't forget to add him/her to the /team/index.html page as well!

Resources

These pages contain some useful additional resources:

  • General page structure: the main structure all pages are based on, what does it mean and how to interact with it.
  • Styling: insights regarding the styling of the website and how to change the main colors and fonts.
  • Icons: how to use the icons that you might have seen in various places in the website.
  • Components: a list of useful snippets of code that are ready to be used just by copy-pasting them in the main content of any page. There are various components with different purposes, from text to image galleries to publication lists.
Clone this wiki locally