My first write-up
Something that has become apparent to me since diving into the Cybersecurity field - and really professional life - is the need to showcase my skills. I have done a lot of cool stuff, but I have failed myself by not documenting the step-by-step process of solving problems, doing projects, etc. This website is my formal step into the realm of becoming better documented, and I think it may be helpful to create a sort of guide for what it took me to get here, in case you are in the same boat as I. Through outlining my exact process of creating this, I will be repeating some of what the author of this website theme, al-folio, said so I must credit and thank alshedivat on Github for the amazing work he has done.
Creation of this site started with picking a hosting method. I had Github accounts, but I wanted to own one under my primary moniker if I was going to put so much work into it. Of course, Github natively supports Jekyll theming for Github Pages, so that is the route I took.
1.) When your account is created, you can create a new repository if you want to start writing your website yourself, and name it “[username].github.io.” At this point I had already done some research and found that I wanted the al-folio theme, and alshedivat makes it really easy to clone the repository by clicking a link in the INSTALL.md file.
2.) These next few steps are also straight from the INSTALL.md file, so I will just paste them here: In this new repository, go to Settings -> Actions -> General -> Workflow permissions and give Read and write permissions to GitHub Actions.
3.) Open file _config.yml, set url to https://
title: Portfolio de Metassassin
first_name: Metassassin
middle_name:
last_name:
email: metassassin@proton.me
description: >
A hacker's professional portfolio.
footer_text: >
Powered by <a href="https://jekyllrb.com/" target="_blank">Jekyll</a> with <a href="https://github.com/alshedivat/al-folio">al-folio</a> theme.
Hosted by <a href="https://pages.github.com/" target="_blank">GitHub Pages</a>.
keywords: jekyll, jekyll-theme, academic-website, portfolio-website
lang: en
icon: prof_pic.jpg
url: https://metassassin.github.io
baseurl:
last_updated: false
impressum_path:
back_to_top: true
4.) Finally, in the repository page go to Settings -> Pages -> Build and deployment, make sure that Source is set to Deploy from a branch and set the branch to gh-pages (NOT to master).
5.) Wait until the GitHub action pages-build-deployment finishes (check your repository Actions tab), which takes ~45s, then simply navigate to https://
6.) To begin customizing my site, I started by editing the home page. I value simplicity in my site, and there are already tabs to share my blog posts and whatnot, so I removed everything but the ‘social’ section from the \_layouts\about.liquid file.
---
layout: default
---
<div class="post">
<header class="post-header">
<h1 class="post-title">
{% if site.title == 'blank' %}
<span class="font-weight-bold">{{ site.first_name }}</span> {{ site.middle_name }}
{{ site.last_name }}
{% else %}
{{ site.title }}
{% endif %}
</h1>
<p class="desc">{{ page.subtitle }}</p>
</header>
<article>
{% if page.profile %}
<div class="profile float-{% if page.profile.align == 'left' %}left{% else %}right{% endif %}">
{% if page.profile.image %}
{% assign profile_image_path = page.profile.image | prepend: 'assets/img/' %}
{% if page.profile.image_circular %}
{% assign profile_image_class = 'img-fluid z-depth-1 rounded-circle' %}
{% else %}
{% assign profile_image_class = 'img-fluid z-depth-1
rounded' %}
{% endif %}
{% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px)
30vw, 95vw"{% endcapture %}
{%
include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
cache_bust=true
%}
{% endif %}
{% if page.profile.more_info %}
<div class="more-info">{{ page.profile.more_info }}</div>
{% endif %}
</div>
{% endif %}
<div class="clearfix">{{ content }}</div>
<!-- Social -->
{% if page.social %}
<div class="social">
<div class="contact-icons">{% include social.liquid %}</div>
<div class="contact-note">{{ site.contact_note }}</div>
</div>
{% endif %}
{% if site.newsletter.enabled and site.footer_fixed %}
{% include scripts/newsletter.liquid center=true %}
{% endif %}
</article>
</div>
With the layout adjusted, I was able to quickly and easily update the text in the /_pages/about.md file to be what I needed. To change the profile picture, simply navigate the the /assets/img/ location and replace prof_pic.jpg and prof_pic_color.png files to the image of your choice. Changing th edescription was
7.) The next thing I wanted to do was get my CV/resume updated. This part was rather easy - but something to know is that there is a primary /assets/json/resume.json file, that contains all of the fields that one may want; however, there is another file for backup called cv.yml in the /_data/ location. Due to the formatting differences and the lack of edits needed, I opted to rename the resume file to resume1.json and use the .yml file instead.
8.) The template thankfully comes with a bunch of different navigation tabs where you can have a blog, post projects, talk about your fellow researchers, etc. For my purposes, I didn’t really need all of those things, so I renamed one of the tabs (I believe it was ‘people’) to document and talk about my CTF team, and I kept the about, blog, and cv pages. The /_pages/ folder contains all of the pages, and editing that ‘people’ page really only required updating the permalink, changing the ‘nav_order,’ and finally updating the .md filename to ctf.md. Of note, I picked this particular page to edit because the layout worked the best for my purpose, but it is important to note that there are different layouts available in the /_layouts/ location.
---
layout: page
permalink: /ctf/
title: ctf
description: Information and resources around CTFs and my team's history!
nav: true
nav_order: 4
---
9.) Similar to the example above, the only adjustments needed to remove pages from the navigation bar was editing the applicable .md files in the /_pages/ location, changing the ‘nav’ value to false, and adjusting the ‘nav_order’ to something like ‘9.’ The reason I found the last part to be necessary, was because if a page had ‘nav’ as false but ‘nav_order’ 2, then there would be a gap in the navigation bar.
10.) With basically everything in order, the final piece before the blog (so I have something presentable while I tackled creating write-ups), was updating the favicon, changing the site footer, adding my desired socials to the home page, and adjusting the tags that are used for indexing posts in the blog. This is all stuff that is handled in the /config.yml file. Below are the value changes I made - I will not include all of the text from the file because it is a lot, but maybe it could still be helpful.
The favicon is controlled with a value called ‘icon’ under the ‘site settings.’ I just used the profile picture for ease:
icon: prof_pic.jpg
The only change that the footer needed was removing the picture credits because I won’t be using the photos. This was also under ‘site settings’:
footer_text: >
Powered by <a href="https://jekyllrb.com/" target="_blank">Jekyll</a> with <a href="https://github.com/alshedivat/al-folio">al-folio</a> theme.
Hosted by <a href="https://pages.github.com/" target="_blank">GitHub Pages</a>.
The socials are all under the ‘social integration’ section. The icons, other than ‘RSS’ and ‘email’ only show on the home page if there is a value present, so remove what you don’t want, and add what you do. I wanted to keep the RSS and email icons (I didn’t investigate where these were configured for that reason), and I added the following:
discord_id: Metassassin
github_username: Metassassin
The blog tags and categories are all controlled within two lines under the ‘Jekyll archives’ section:
display_tags: ["write-ups", "general", "research", "ideas", "hobby"]
display_categories: ["hacking", "art", "ctf"]
11.) When it came to revamping the blog and posts, it was important to read through the different templates, as the author intended for them to be informative and instructional. The existing pages can be renamed or deleted largely with no issue, so I finished writing what would become this post, as well as another for a CTF challenge that I had documented completing.
12.) Due to me not using all of the pages on the site, and not needing some .md files in the root of the Main branch, I deleted a bunch of files to simplify my experience moving forward. This is something that others may not care for, but again, I value simplicity. This process took me some time, and the process for everyone is subjective. If you are going to delete stuff, I just recommend downloading the files first so you can reupload them if need be.
13.) Now that the site existed, the very final step of the process was using my domain. I think it is just a cool cherry on top of what I do and represent as a cybersecurity professional, because the domain I have is a unique and clever staple that resembles a phishing site. This piece was super simple - I just needed to add a DNS CNAME record via my domain provider that pointed metassassin.github.io to my custom subdomain metassassin-u, and then add the subdomain metassassin-u.pdate.zip as my custom URL under the ‘pages’ section of my repository settings and click save. My site was instantly available at the subdomain, and the site is officially published!
One of the first problems I ran into with the site was some JSON formatting stuff. This led me to restart and clone my repository, install Jupyter, Ruby and Jekyll locally via Homebrew (I am a Mac user by day), and host my site statically. If you do it this way, don’t forget to add Ruby to the $PATH: echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc.
This worked well because I could run bundle exec jekyll serve --trace to ‘bundle’ the site from the repository file location, go to httpx[:]//localhost:4000 and view site changes instantly, but then I had issues pushing the changes back up to the Main branch which is an issue that I still have not resolved. For this reason, I ended up going back to editing straight in Github, which is maybe not preferred because it is really easy to break everything and get lost, but I adopted the methodology of only making small changes at a time and actually documenting the changes in the comments so they could easily be reverted if something did break. My commit history is atrocious to say the least, but the site works.
Something additionally interesting about Jekyll running locally, is that when it ‘bundled’ the site, it created a new folder called /_site/. I had not previously done any research about why this may be, but it is a temporary folder. When I was making changes to the blog locally, they kept getting reverted and I couldn’t figure out why, but it turned out that I was editing the temporary files. I advise not messing with that temporary folder, it will save you some trouble!
1.) Maintaining a website is much easier than setting one up, which means you should do it sooner rather than later, if you ever plan on doing it. One of my problems was the continual stacking of ideas and projects, but nowhere to publish those things. Without the author of this template, my site would likely be some boring HTML, and I am very thankful to have something presentable, elegant and quite easy to edit/maintain.
2.) Research and reading the manual is critical. I found myself a lot of the time just assuming that I knew what was happening, which resulted in several instances of breaking the site with varied results. The first time, I had to completely rebuild, which is obviously very frustrating, and the instances after that resulted in me editing the same fields and pages multiple times because I was editing temporary files. Save yourself the trouble and just do the research before diving in.
3.) Take notes of your ideas. I had a lot of different concepts and ideas flying around my head while I was trying to come up with a structure I liked, as well as the content I wanted to include, which made this a very ‘all-over-the-place’ endeavor. It ended up helping a lot to just write stuff down so I could prioritize and focus on making changes in an organized way. I use Joplin if you are looking for a good open source note taking application.