Project Managment
January 29, 2024
Challenge
Build a personal website describing you and your Journey💫
Plan and sketch a potential final project link
Steps
My journey commenced with the quest for a themes that could aptly encapsulate my experiences. The exploration began by scouring the myriad free templates across the web, encompassing various frameworks and templates. Amidst this search, I stumbled upon Hugo themes, and it resonated with me as the ideal choice. After meticulously sifting through numerous templates, I ultimately selected the one you are currently witnessing DigitalGarden.
Hugo
Hugo is known for building wesites in a speedy flexable way and Hugo is an open source static site generator.
Installing Hugo
In order to embark on the journey of building a website using the Hugo framework, it is imperative to install Hugo on your machine. However, a few prerequisites must be satisfied before initiating this process.
1- GIT
2- GOLang
3- Dart Sass
Preparation
In the initial stages, it is essential to prepare the operating system by obtaining a package manager. One such recommended package manager for Windows is “Chocolatey.” Chocolatey, as an open-source package manager, leverages existing technologies such as PowerShell and NuGet to streamline the installation process.
Installing Chocolatey
1- Open power Shell as administrator :
Run the following command:
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
Chocolatey package manager is installed now.
Note: to check just run the command
choco -?
Sass
Sass stands for Syntactically Awesome Style-sheet, its an extension from CSS, used to reduce repetition of CSS and its compatible with all CSS versions.
Install Sass
Using the powershell (run as administrator) we have to run the following command.
choco install sass
Then Powershell will take care of all the following steps you have only to say yes.
GOLang
Open source programing language developed by GOOGLE to manage servers and networks. “We will not use it most properly” I have download it just to have it on my machine.
Install GOLang
Refer to this site and download.
GIT
A free open source version control system used to handle small to very large projects through source code management.
Install GIT
To install we will use PowerShell (run as administrator) to run the following command.
choco install git
choco will now take care of the rest you have only to accept running the next script.
With the operating system prepared and the Chocolatey package manager in place, we are now equipped with all the necessary elements to proceed with the installation of Hugo on our machine.
Install Hugo
To initiate the installation process, we will seamlessly continue using PowerShell by executing the following command:
choco install hugo-extended
After executing the command, Chocolatey will seamlessly handle the remainder of the installation process, as is customary. Upon completion, simply confirm by selecting “yes” to execute the script.
Important Note: To utilize Hugo commands effectively, it’s crucial to employ GIT bash; PowerShell alone will not suffice for this task. Please refrain from using PowerShell for Hugo-related operations.
Creating the Site
Now, using Git Bash, initiate the site creation process. You can either run Git Bash directly or create a folder, right-click within it, and choose to run Git Bash, ensuring that the directory aligns with the opened file.
Subsequently, proceed to execute the initial Hugo command.
hugo version
Note: Executing this command will return the version of Hugo in use, serving as an indicator of a successful installation.
Note Should you receive a different response, it signals the need to backtrack one step and ensure that Hugo is installed correctly, following the instructions provided at the beginning of this process.
New Site
To initiate the creation of a new site, execute the following command:
hugo new site quickstart
Note: The term “quickstart” in the command represents the desired site name, and executing this command will generate a folder named “quickstart” to encapsulate the site files.
Next, navigate to the “quickstart” folder by changing the directory. Ensure to input the complete directory path. Once inside the folder, proceed to initialize Git for version control.
git init
Upon entering the folder, you will observe the creation of various sub-folders, each playing a crucial role in the structure and functionality of the newly initiated site.
Following this step, you have the option to either clone the desired theme for your site or commence building from scratch, depending on your preferences and project requirements.
Now, it’s time to incorporate the name of the chosen theme into the configuration folder. Adjust the configuration settings accordingly to integrate and activate the theme within your site.
echo "theme = 'Theme_Name'" >> hugo.toml
To run the site locally, execute the following command
hugo ServicePointManager
To view your website locally, open your browser and navigate to http://localhost:1313/
If you wish to stop the local server, simply press (Ctrl + C) within the Git Bash window.
Important Note: Every theme comes with its own documentation, providing valuable insights and guidance on customization, features, and best practices. Refer to the theme’s documentation to make informed decisions and maximize the potential of your website.
Cloning the repository
Within GitLab, the flexibility is afforded to seamlessly operate in both online and offline environments, facilitating remote collaboration. In my specific scenario, I opt to create a local clone of my repository on my machine, allowing me to work offline and conduct thorough testing. Subsequently, I strategically push the refined changes online, ensuring a meticulous and controlled integration process.
Clone Command
git clone <repository_url>
git config --global user.name "Git-Lab User-name"
git config --global user.email "Git-Lab User-email"
git config --global --list
git cd <Folder name in the directory>
Note: you can press space ofter “CD” and then “Tape” –> git will compleate the directory name
git add .
git pull
With all files securely stored offline on our machine, we are now poised to make necessary edits and enhancements.
In my case I have changed the entire framework so I will post my files in the repository by pasting all files in the directory offline then i can commit the changes and then push them online.
git commit --m "Note for the user"
git push
Now our new site and theme is online and we can start adding our documentation.
Key Note: During the initial launch, the site experienced styling issues, deviating significantly from the expected appearance. This discrepancy resulted from a misconfiguration in the file settings, causing the styles to be erroneously sourced from the local directory instead of the correct online directory.
The issue was successfully resolved by adjusting the configuration file. Enabling relative URLs and abstaining from utilizing a base URL proved to be the key solutions.
