How I easily created and manage this website
This website has been working since July of 2020. But I did not started really working on it until a few weeks from now, as it seemed to complicated and time-consuming to manage the website. However, I finally settled with a workflow that makes it easier to create posts and upload the final version of the website to the server. So I decided to make a small guide covering how to go through this process as easily as possible to have your very own and uncensored internet presence.
But before having your own website, the first step is to get a domain and set up the server. For this step, I highly recommend following Luke Smith’s video on this topic, as I did. Some people may argue that setting a website this way can be difficult and they prefer to have a service that handles the hosting part. This may be true as you don’t have even open a terminal, but having your own server opens a new world of possibilities: creating your own git server, VPN service, email, etc.
Before continuing with the guide, there is a small difference with Luke Smith’s site creation and mine, it is the website directory. In my case nginx configuration file should be as follows:
# Default server Configuration
server{
root /var/www/tony/public;
index index.html index.htm index.nginx-debian.html
server_name antonioaslan.com www.antonioaslan.com
location{
try files $uri $uri=404
}
}
Now, you have a server with https created, but no content is on the server. If you know or want to learn, you can create the website with HTML and CSS and end up with a beautiful and simple website. On the other hand, you can create the website using the HUGO framework, which lets you compile the website from markdown files. If you don’t know markdown, don’t worry as it is easier to use than Microsoft Word.
HUGO offers a pretty good tutorial on how to set up the website on your local machine, so I won’t include that part on this tutorial. However I think there are some basic configuration steps that are not shown in this tutorial:
Fonts and Rendering
You may love the theme you chose to create the website, but chances are that you may want to change some small aspect of the website: Colorscheme, Fonts, Line Spacing, Font Size, etc. All of those configurations do not appear on the config.toml file, rather they are located in the theme files itself in .scss format. For example, Colorscheme and Font Type can be found in the _variables.scss file at ~/"Your Website"/themes/"Your Theme"/assets/scss.
// Fonts
$text-font-family: Dosis,light;
$heading-font-family: Lato, Helvetica, sans-serif;
$code-font-family: 'Source Code Pro', 'Lucida Console', monospace;
// Colors
$bg-color: #FAFAFA !default;
$fg-color: #212121 !default;
$alt-bg-color: #E0E0E0 !default;
$alt-fg-color: #000 !default;
$link-color: #1565c0 !default;
// Colors dark
$bg-color-dark: #212121 !default;
$fg-color-dark: #dadada !default;
$alt-bg-color-dark: #424242 !default;
$alt-fg-color-dark: #dadada !default;
$link-color-dark: #42a5f5 !default;
This file is common to all HUGO themes, but as every theme is build differently, you will have to take a look at some of the files in the scss folder to change the options you want. Although these .scss files are pretty self-explanatory, it took me no time to find and change the variables to end up with the options I wanted.
Website Structure
As said before, HUGO compiles the website from markdown (.md) files, meaning that each markdown file you create in the ~/"Your Website"/content folder will have its corresponding link and will be compiled as a page. If I create the file ~/"Your Wesite"/content/about.md, it should be compiled and located at antonioaslan.com/about. This way, you can create markdown files that act as menu pages for other pages in your website.
This was the method I followed to create the Projects page on this website. I made a markdown files as follows:
# My Projects
This list will compile all of the projects that I have been working over the last five years. Providing a description of each one of them and links for the source code and schematics.
## Ongoing Projects
- [ Neutrino Trajectory Prediction Using Deep Learning.](/projectos/tfg/)
- [MIDI Drum Trigger Interface.](https://github.com/AntonioJojoto/MIDI-Drum-Trigger-Interface)
- [M808B Coil Gun Tank.](https://hackaday.io/project/19942-m808b-coilgun-tank)
## Finished Projects
These projects were finished but never documented, as I made them at a very young age. This will attempt to document these projects as they are still working and being used.
- [Lab-grade Power Supply using a PC Power Supply.](/projectos/psu/)
- Low-cost Arduino Smoke Detector.
- RGB Led Controller using Cell-Phone as a Controller.
This page redirects the user to different pages in the projectos folder. With their corresponding markdown files. Remember that if the file name is in capital letters, those will appear as lower-case letters in the links.
├── projectos
│ ├── PSU.md # At antonioaslan.com/projectos/psu/
│ └── tfg.md # At antonioaslan.com/projectos/tfg/
└── projects.md # At antonioaslan.com/projects/
Static Content and Images
At the website folder, you should also have a static folder. These folder will save all the files that the website will host “as they are”. This can be useful to let user download PDFs and show images on markdown files, as images in markdown should point to the directory where they are saved in. To include this meme on the page:
I would need to have the image at ~/"Your Website"/static/images/image.jpg and add the image to this file as:
Uploading the website to the server
Once the website is finished, its time to upload the website to the server. First compile the website using the hugo -D command and a new folder called public should appear on the website folder. Here the entire compiled website is stored, so it should be uploaded to the website at /var/www/"Website"/public. There are many ways to upload the folder but I highly recommend using rsync, as in only one line the entire folder will uploaded to the server:
rsync -a ~/webpage/public root@antonioaslan.com:/var/www/tony