Kev Quirk|

Menu

Author: Kev Quirk

Hi, I'm Kev and I'm a cyber security professional from England. I use this site to share my thoughts and ideas from time to time.

Why Lobste.rs Is Better Than Hacker News

Outside of my RSS feeds, there are a handful of places where I get my news from. Two of the main ones I use are Lobste.rs and Hacker News. Lobste.rs is far smaller than Hacker News, but I much prefer it. Here’s why…

The reasons why I think Lobste.rs is better than Hacker News is 4 fold:

  1. It’s invite only.
  2. The community is polite & knowledgable.
  3. There are tagging and filtering options.
  4. In order to vote something down, you need to give a reason.

Lobste.rs Is Invite Only

Yep, that’s right. If you want to have an account on Lobste.rs, you’re going to need to know someone who already has an account. However, you can still go to their website and view what is being posted.

But the Lobste.rs team go one step further – they maintain a user tree that publicly shows who invited who. So if you give an invite to someone you don’t know and they start posting spammy or poor quality content, it not only looks back on them, it looks back on you too.

This ensures that users are always held to account for their actions. Whether that’s inviting someone who is a poor quality member, or just posting poor quality posts yourself.

Note: If you want to join Lobste.rs I’m happy to invite you, just get in touch. However, I will only invite people with whom I have a relationship with. If I don’t know you, I won’t invite you. Sorry.

Polite & Knowledgable Community

Because the community is invite only, people tend to know what they’re talking about. Lobste.rs is kind of like Fight Club, except you’re allowed to talk about it!

Those who are in the know and contribute good quality content tend to know others who do the same. This has snowballed and now the community is full of experts in their fields (except me, I managed to slip through the net somehow :))

If there’s a post at the top of the Lobste.rs homepage and it’s tagged in a topic you’re interested in, there’s a good chance that it’s a very good quality post. Speaking of tags…

Tagging & Filtering

Hacker News is great, but the content posted to it is prolific. To my knowledge there’s no way to filters that content out. So if I’m interested in seeing only posts about Linux, privacy, or web design, I’m out of luck.

Instead I have to wade through the never ending ribbon of posts, which can only be sorted by newest, or by popularity.

On Lobste.rs you’re required to assign a tag to any post you submit, and you can only choose from a specific collection of tags. This keeps Lobste.rs focussed and on topic.

Not only that, but you can filter out tags you’re not interested in. So once you have logged into your account, your feed only contains posts within the tags you’re interested in.

Each tag also has its own RSS feed, so you can subscribe that way too, even if you don’t have an account.

Downvoting

I’ve left what I think is the best reason why Lobste.rs is better than Hacker News until last – downvoting requires an explanation.

This means that a comment you don’t agree with can’t be downvoted without a valid reason. The Lobste.rs team elaborate on this on their about page.

Often on other sites, a user would have his or her comment downvoted without explanation and then edit their comment to ask why they were downvoted. On this site, voters must choose a reason before downvoting comments and those votes are tallied and shown to the original commenter. Users may downvote stories and comments after their account has 50 karma.

— Lobste.rs about page

As you can see from the quote above, it’s not even possible to downvote a comment until you have earned your stripes with the community. Again, this is another great way of protecting the excellent community on Lobste.rs.

I’ve personally had stuff downvoted on Lobste.rs, but when doing so, people have to provide feedback. This feedback has always been constructive and extremely valuable, as it helps me improve and prevents me from writing into an echo chamber.

Conclusion

I really like Hacker News, but I love Lobste.rs for all the reasons listed above. I really hope the Lobste.rs community continues to go from strength to strength.

Privacy On Mainstream Media

I’ve just been having a flick through Hacker News and I came across this post from the BBC:

What can you use instead of Google and Facebook?

It’s an interesting read that talks about things that many privacy advocates already know – namely DuckDuckGo instead of Google and Signal instead of WhatsApp.

However, many people outside of the privacy niche don’t know about these services, and they will only ever find out if mainstream news outlets, like the BBC, keep producing content like this.

I was so happy to see this on the BBC, I had to share it.

Migrate From Windows 7 To Linux

I have read so many posts about this recently, it’s making my head hurt. I get the sentiment – a popular OS is going end of life, so it’s a good opportunity to coax new people over to Linux.

However, I really don’t think this is going to happen. Why? Because I think that the vast majority of Windows 7 users who are out there are probably in the enterprise space.

Think about it, Microsoft offered free upgrades to Windows for ages – like 2 years or something. Not only that, but it nagged and nagged and nagged for people to upgrade.

I image most small to medium size businesses (SMB) took advantage of this offer too, as Windows licensing can be pretty expensive.

That just leaves the enterprise space that usually have thousands of users, all using some crappy piece of internally developed software that is limping along and requires an older operating system.

Because of this, enterprises will happily pay for extended support for Windows 7 until such time as they’re ready to upgrade to Windows 10.

You see? Linux isn’t getting a look in here. The home user market have mostly upgraded for free, as have the SMB market. Enterprises will never move to Linux because…well, it’s just not the done thing, is it?

I love Linux, but I’m sorry, I really don’t see Windows 7 users migrating to Linux purely because support has ended. 🙁

How To Self-Host Your Web Fonts

If you’re using a pre-built theme, the likelihood is that Google Fonts is being used for rendering typography. This post will show you how to self-host web fonts so you’re not beholden to Google.

Getting Started

This first thing to do is to choose your fonts. If you want to use the same fonts as your site, you will need to the font names your theme uses. You can do that with browser plugins like Font Finder Revived for Firefox.

For this post we’re going to be using Font Squirrel as the font provider. If you don’t know which fonts you want to use, head over there and start browsing around.

Choosing Fonts

This site uses Fira Sans for headers and Merriweather for the body text. So we will use these as the example for this post.

Before you go downloading fonts and using them on your website, you need to make sure the font’s license allows @font-face embedding. This is shown at the top of the font page and is depicted by a globe icon:

If the fonts you want to use have this icon, then you’re all good and can legally use them under the terms of the license. Both Fira Sans and Merriweather allow this, as do most of the fonts on Font Squirrel.

Now you know you can use the fonts you have picked, go ahead and download them using the purple Download button on Font Squirrel.

Removing Noise

As you can see from the image below, Fira Sans has a tonne of fonts within the package. Since I only use Fira Sans for headers, I’m not going to need most of them.

My headers will only ever be bold, so I only really need the Fira Sans bold font. All the others are just wasted space. However, I may need an italic header from time to time, so I will take the bold-italic font too.

Merriweather doesn’t come with quite so many options, but there are still more than we need. Because we’re going to be using Merriweather for our body font, we’re going to need standard, italic, bold and bold-italic. I personally like the black version of Merriweather, because it’s heavier than normal bold, so it gives more of a contrast to standard text.

We have picked out the fonts we want to self-host, which are:

  • Fira Sans bold and bold/italic (for headers)
  • Merriweather standard, italic, black and black/italic

Self-Host Web Fonts

You should now have a folder for each font that contains only the fonts that you need for your website. It’s now time to convert these fonts into web fonts. This is done using Font Squirrel’s web font generator.

Keep the settings set to optimal and upload your first collection of fonts. You will also need to check the box to confirm the font license you’re using allows web font usage. Once the fonts are uploaded, click the Download your kit button.

Note: This process may take a few minutes to complete.

Repeat this process if you’re using more than one font. Once you’re done, you should have 2 web font kits that each look similar to this:

Extract each web font kit and delete all the files in the kit except for stylesheet.css and the WOFF / WOFF2 files. It’s now time to start implementing code changes so you can self-host web fonts.

Code Changes

Open up the stylesheet.css and change the font-family lines to all have the same name. In this example, they’re all called 'fira'. Then change the font-weight and font-style to suite what you need.

@font-face {
    font-family: 'fira';
    src: url('firasans-bold-webfont.woff2') format('woff2'),
         url('firasans-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'fira';
    src: url('firasans-bookitalic-webfont.woff2') format('woff2'),
         url('firasans-bookitalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

This will tell your website to use the standard bold font for text, but use the italic version of the font when rendering italic text. For Merriweather we have a few more entries, which are:

/* Standard font */
@font-face {
    font-family: 'merriweather';
    src: url('merriweather-light.woff2') format('woff2'),
         url('merriweather-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
/* Bold font */
@font-face {
    font-family: 'merriweather';
    src: url('merriweather-black.woff2') format('woff2'),
         url('merriweather-black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}
/* Italic font */
@font-face {
    font-family: 'merriweather';
    src: url('merriweather-light-italic.woff2') format('woff2'),
         url('merriweather-light-italic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}
/* Bold & Italic font */
@font-face {
    font-family: 'merriweather';
    src: url('merriweather-black-italic.woff2') format('woff2'),
         url('merriweather-black-italic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}

You now need set both to body and header fonts within the stylesheet for your website:

body {
    font-family: "merriweather";
}
h1, h2, h3, h4, h5, h6 {
    font-family: "fira";
}

The final step is to delete the Google Fonts link in the <header> of your website and replace it with links to your new stylesheets:

/* Remove the line that looks like this */
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet"> 

/* Replace it with this */
<link rel='stylesheet'  href="fonts/merriweather/merriweather.css" type='text/css' media='all' />
<link rel='stylesheet'  href="fonts/fira/fira.css" type='text/css' media='all' />

That’s it! You can now self-host web fonts, but more importantly you’re not reliant on Google for rendering your typography.

Conclusion

Self-hosting your web fonts has a number of advantages. You don’t need to rely on 3rd parties for crucial parts of your website’s theme, and you have regained control.

Crucially though, because your website isn’t calling out to third parties, your website should load quicker too.

What A Week!

If you work in the InfoSec industry you probably had a crazy week too!

This week has been full of significant vulnerabilities like the Cisco Netscaler fiasco, Windows Crypto was all broken, VMWare shit the bed and now IE has a zero day.

All of this has resulted in what was probably the busiest week of my working life. Certainly my busiest week working for the company that I currently work for.

Work, Bed, Rinse, Repeat

It’s been pretty much office – home – bed – office for the entire week. I’ve done no exercise, I’ve eaten nothing but crap food, and I’m pretty sure I’m on the cusp of getting scurvy. 🙂

Even today (Saturday) I’ve been up all night working, so I’m feeling pretty overwhelmed and absolutely knackered.

Getting Better

Things just got better for me though, because this happened:

That’s right, I took the dog for a walk. That’s it, nothing special, just me and the dog out walking in the fields behind my house for a couple of hours.

This gave me time to reflect on such a hard week, and you know what? It’s not that bad. Weeks like this are what give you perspective. You come out stronger than you were before, because there’s always something new to learn. Whether it be about yourself, or what you do for a living. These hard weeks help.

If you’re having a hard day, week, month, or even year, it won’t last forever. Get yourself out, walk the dog, play a game, do a puzzle, spend time with friends. Do anything. Just don’t worry, it’ll be alright in the end. 👍

Making A Light Website – 02 Design

After going though the last post in the Making A Website series we went through the basics of getting a light website up and running. In this post we will looks at adding to our home page some more. But first, let’s look at the challenges I set for you in the last post:

Challenge 1: see if you can work out how to add a bulleted list to your webpage.

Did you work this one out? In HTML a bulleted list is called and unordered list, which uses the <ul> HTML tag. So to add a list, you need to add the following HTML code to your index.html file:

<ul>
    <li>This is item #1</li>
    <li>This is item #2</li>
    <li>This is item #3</li>
</ul>

Challenge 2: See if you can change the colour of hyperlinks to red.

This one is a CSS challenge. Did you work it out? As I mentioned in the last post, hyperlinks use the <a> tag in HTML. So to make a hyperlink the colour red, you need to add the following CSS code to your style.css file:

a {
    color: red;
}

If you managed to work out how to complete these 2 challenges, well done! Let’s see what out website looks like with an unordered list added and hyperlinks set to red:

Colour Palette

One of the first things you need to do when making a website is to decide on the colour palette you wish to use for the site’s theme. There are some online colour palette generators, which are generally pretty good. For this site, we’re looking at simplicity, so we’re going to use the same colour palette I use for this site:

A light website needs a light theme, right?

Now we have identified the colour palette we’re going to use for our light website, we need to add some CSS. We could add the colours for each piece of CSS code manually, but if we decided to change the colour palette at a later date, it would mean lots of code changes.

Instead we’re going to use variables. Variables allow us to set the colours in one place, then reference them throughout the CSS. So if we decide to change the colour palette later on, we only need to update the variables in one place and all CSS using those variables will be updated.

First we need to articulate our variable at the top of the style.css file. We do that with the following CSS code:

/* Global variables for changing colours across the site */
:root {
    --accent: #226997;
    --main: #333;
    --light: #666;
    --lighter: #f3f3f3;
    --border: #e6e6e6;
    --bg: #fff;
}

Then we can change the colours we setup in the body section of our CSS in the last post. To do this, simply change the colour from #fff to var(--bg);. Our body CSS should now looks like this:

/* Format the main body of the website */
body {
    background: var(--bg);
    color: var(--main);
    font-family: sans-serif;
    font-size: 1.1em;
    display: block;
    text-align: left;
    width: 800px;
    margin: 0 auto;
}

Now our background colour is set to white because we’re using the --bg variable for the body’s background, and our text is still grey because we’re using the --main variable for that.

You may have noticed that the font-size entry has been added too. This is just to make the text a little bigger and therefore a little easier to read. Feel free to change this to whatever you like, or remove it completely. Personally, I like large text. 🙂

Formatting Hyperlinks

Next we’re going to look at formatting how hyperlinks are displayed to make them fit in with our colour palette. Again, we’re going to format them in the same way I do on this website.

By default hyperlinks are underlined. I don’t do that with my theme, so we’re going to change the colour to --accent and override the default so links are not underlined. We do this be adding the following code to our style.css file:

/* Format hyperlinks */
a, a:visited {
    color: var(--accent);
    text-decoration: none;
}

In the CSS above, we have both a and a.visited set. By default, when you have already clicked a link, it turns purple. We want all of our links to be a consistent colour. Adding a.visited ensures this happens.

What we want to do now is add an animation for when someone hovers over the link. In this case we want to underline the text when the mouse cursor hovers over a link. We do this by adding the following CSS code:

a:hover, a:focus {
    text-decoration: underline;
}

Again, we have more than one attribute called out. a:hover is what happens when the mouse hovers over a link. a:focus is when someone clicks the link. If we didn’t have this, the underline would disappear when someone clicks their mouse to follow a link.

Banner Image

The next thing we’re going to do is add a banner image to our website. When making a website, adding images can really add to the aesthetic of the design. But use them sparingly as they can be very large and the larger your website is, the longer it will take to load. Remember, we want a light website.

Ok, we’re going add a simple banner image to our site and format it slightly with some CSS. To add an image to our index.html file, we need to use the <img> tag.

To do this, add the following HTML code above the <h1> title:

<img class="home-banner" src="images/home-banner.png"></img>

The class of this image is home-banner. Classes allow us to apply CSS formatting to that image only, without affecting all of the images on the entire site.

All we need to do now is create a folder in Neocities called images and upload the banner image to that folder. This is because the source (or src) is images/home-banner.png. You’re telling the HTML that your banner image is called home-banner.png and it’s located in the images folder.

So let’s add some basic styling to the banner-image class. Head over to your style.css file and add the following CSS code:

/* Format the banner image on the home page */
img.home-banner {
    padding-top: 60px;
    padding-bottom: 20px;
}

All this CSS will do, is add a little bit of white space at the top and bottom of our new banner image. Here is what our light website now looks like with the banner image added:

This is starting to look pretty cool, but it’s still a very light website!

Adding a Favicon

If you look at the tab in the image above, it says Kev Quirk in the tab’s title, but it has no icon next to it. However, when you look at the tab on this website, not only does it say Kev Quirk, it also has a grey and white KQ icon with it. That’s my favicon.

Let’s add a simple favicon that is in-keeping with the rest of our theme. To do this, we need to add the following line of HTML to <head> section of our index.html file:

<link rel="shortcut icon" href="images/favicon.png" />

Like the banner image, our favicon file is called favicon.png and it is located in the images folder we created earlier. Now that we have added the code for the favicon to index.html let’s take a look at the site:

Much better! We now have a nice blue & grey favicon that matches the banner image on our site. A light favicon to go with a light website.

Putting It All Together

So we have made quite a few changes to both the index.html and style.css files. If you put all the changes together here is what the files should currently look like:

index.html

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.png" />
<title>MyLight.Website</title>
</head>
<body>

  <img class="home-banner" src="images/home-banner.png"></img>

  <h1>Hello World!</h1>

  <p>Now we're cooking. Not only does the text look better, we also have images and <a href="#">links look good too</a>!</p>

  <p>We have managed to add some additional styleing to our CSS Stylesheet, we have added a favicon and an image in the body of the page.<p>

  <h4>This thing is starting to look like a website!</h4>

  <p>Just like Step 01, This page is covered in more detail on my first blog post in the series, <a target="blank" href="https://kevq.uk/making-a-website-02-design">02 - Design</a>.</p>

  <p>You can download the raw files for this step (and all other steps) from the <a target="blank" href="/downloads.html">downloads page</a>.

  <p><b>Step 03 hasn't been published yet. If you want to know when it's release, <a target="blank" href="https://kevq.uk/feed">subscribe to my RSS feed</a>. Once it has been released, this page will be updated.</b></p>

  <a href="/">Go Back Home --></a>

</body>
</html>

style.css

/* Global variables for changing colours across the site */
:root {
    --accent: #226997;
    --main: #333;
    --light: #666;
    --lighter: #f3f3f3;
    --border: #e6e6e6;
    --bg: #fff;
}

/* Format the main body of the website */
body {
    background: var(--bg);
    color: var(--main);
    font-family: sans-serif;
    font-size: 1.1em;
    display: block;
    text-align: left;
    width: 800px;
    margin: 0 auto;
}

/* Format the banner image on the home page */
img.home-banner {
    padding-top: 60px;
    padding-bottom: 20px;
}

/* Format hyperlinks */
a, a:visited {
    color: var(--accent);
    text-decoration: none;
}

a:hover, a:focus, a:active {
    text-decoration: underline;
}

What Next?

That’s it for this Making A Website post. We’re making really good progress. We now have a website that has the beginnings of a theme, a colour palette and some custom CSS to pull it all together.

In the next post in this series we’re going to be looking at adding additional pages and a menu. At the end of this series, your website should look something like MyLight.Website.

As usual, if you want to download the raw files for this series, you can do so here. I will update the page after every post with latest website files.

Excerpt vs Full Content?

When discovering a new blog, I like to have a look through at least a few pages of blog archives before adding them to my RSS feeds. I will also make an effort to go back and peruse most, if not all, a site’s contents at some point too.

But when a site’s blog feed is configured to to display the entire post contents, I find it extremely difficult and laborious to go through the authors content.

When I originally designed the theme for this site and moved back to WordPress, I designed it so the excerpt was displayed in the blog feed. However, I ultimately decided that the excerpt wasn’t adding much value, so removed it completely in the end.

Just having the post title and some meta data allows readers to quickly flick through my blog feed and get a feel for what content this site contains.

Disagree?

You may think that having an excerpt, or even the full content allows you to get a feel fore the post without clicking on the link. I get that, an excerpt can add a little context. But I find that I never read the excerpt, but instead just read the first couple paragraphs of the posts. If I like what I read, I’ll read the whole thing.

Having the entire content in the feed makes finding the start of a new post very difficult, as it all reads like one big stream of formatted text to me. There’s no quick way to thumb through posts to see what the site contains.

Wrapping Up

This is just a quick post to explain a) the reason why I removed excerpts from my homepage a few weeks ago and b) why I don’t personally like having the full post content in the blog feed.

What are you thoughts? Feel free to contact me and let me know.

Making A Website – 01 The Basics

In the first post for this series, I took you though setting up a hosting package with Neocities and getting a domain name registered. So in this post let’s actually start making a website!

I have made a dedicated website that follows this series. It will accompany these posts, so head over to MyLight.Website to check it out.

Neocities

The first thing to do is to login to your Neocities account and navigate to your dashboard. Here you should see a very basic website that Neocities automatically creates:

Delete all the files within the dashboard apart from index.html. This is done by hovering the mouse over each file and selecting delete.

Now click on index.html to edit it and replace all of the contents of the file with the following HTML code:

<!DOCTYPE html>
<html>
<head>
<title>MyLight.Website</title>
</head>
<body>

<h1>Hello World!</h1>

<p>Welcome to the first stage of my <i>Making A Website</i> series. As you can see, this page is extremely basic ans is covered in more detail on my first blog post in the series, <a target="blank" href="https://kevq.uk/making-a-website-01-the-basics/">01 - The Basics</a>.</p>

<p>You can download the raw files for this step (and all other steps) from the <a href="/downloads.html">downloads page</a>.

<p>OK, let's move on to step 1.1, where we start looking at some basic CSS coding.</p>

<a href="step1.1.html">On To Step 1.1 --></a>

</body>
</html>

Breaking It Down

Let’s break the site down to it’s different parts and explain what they all are. After all, what’s the point in making a website if you don’t learn something new.

  • The <head> element is used to store metadata such as document title and links to stylesheets, fonts and scripts. The <head> is not displayed on the page.
  • <title> is simply the title of the webpage. It’s basically the text that’s displayed within the tab on your browser.
  • <body> is where all the fun stuff happens. This is the main bulk of the webpage that is displayed in the browser window.
  • The <h> tag defines headers. These can be different sizes, starting with the biggest, <h1> to the smallest, <h6>.
  • <p> simply means normal text and is short for paragraph.
  • <a> is a hyperlink; it’s short for address.
  • When you see a tag that is preceded with a forward slash, for example </body> that depicts the end of that particular element.

For now, the only thing you need to edit is the line that starts with <title>. Replace my name with whatever you want the title of the webpage to be. The rest you can edit as you see fit. Just play around and have fun with it.

Challenge: see if you can work out how to add a bulleted list to your webpage.

These humble beginnings will eventually grow into a pretty nice looking website. But for the time being, this is what your little website should look like:

Adding CSS

Now we have a really simple (and quite ugly) website, let’s look at adding some basic CSS so we can make things look a little nicer. Return to your Neocities dashboard and create a new file called style.css.

Edit the file and add the following CSS code to it:

body {
	background: #fff;
	color: #333;
	font-family: sans-serif;
	display: block;
	text-align: left;
	width: 800px;
	margin: 0 auto;
}

This CSS, or Cascading Style Sheet, will tell your webpage how you would like the <body> element of the site to be rendered. We have picked some colours (#fff is white and #333 is dark grey), a font and also told the body to display in a block that is 700px wide.

Challenge: See if you can change the colour of hyperlinks to red.

The next step is to edit the index.html file so that we tell it to use the stylesheet we just created. We do this by adding the highlighted <link> element on line 4 to the <head> of the website:

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<title>MyLight.Website</title>
</head>
<body>

<h1>Hello World!</h1>

<p>Woah! Things are looking a lot different already, right?</p>

<p>We have a better looking font, and the content is now displayed in a nice block on the page.</p>

<p>We've now added a basic Cascading Style Sheet (CSS) file which has formatted the site a little to make it more appealing. <b>No <i><span style="font-family:TimesNewRoman;">Times New Roman</span></i> here!</b>

<p>Just like Step -01, This page is covered in more detail on my first blog post in the series, <a target="blank" href="https://kevq.uk/making-a-website-01-the-basics/">01 - The Basics</a>.</p>

<p>You can download the raw files for this step (and all other steps) from the <a href="/downloads.html">downloads page</a>.

<p><b>Step 02 hasn't been published yet. If you want to know when it's release, <a href="https://kevq.uk/feed">subscribe to my RSS feed</a>. Once it has been released, this page will be updated.</b></p>

<a href="/index.html">Go Back Home --></a>

</body>
</html>

Save the index.html file and reload your website. It should now look a little nicer than it did before. The font should have changed and the page’s contents should be displayed in a nice block.

That’s it for this post. We’re making good progress, but there’s still a long way to go. In the next Making A Website post, we will look at the following:

  • Picking a colour palette for the site
  • Additional formatting with CSS
  • Embedding images

If you want to download the raw files for this series, you can do so here. I will update the page after every post with latest website files.

Making A Website

Yesterday I wrote a post about All My Links. In that post I stated that a better way would be to have your own website. After thinking about it for the evening, I’m going to put my money where my mouth is and write a series on making a website of your own.

The website will be written entirely in HTML/CSS and will not contain any JavaScript. Over the course of the series we will add to the features of the site, and by the end you should have a site that has the following features:

  • Performs quickly and is responsive, so it looks good on mobile
  • Has a nice looking theme that can be easily customised
  • Contains a simple blog
  • Has multiple pages with a menu, including a contact page

Pre-Requisites

Domain Name

I’d recommend using your own domain name for your website as it gives you a simple URL that you can give out.

I personally recommend NameCheap. I use them for registering all my domains. They’re well priced and include WhoIs Privacyguard for free.

Web Hosting

Now you have your domain, you’re going to need somewhere to host your files while making a website. For this series I’m going to recommend you use Neocities.

That’s because they only cost $5/month (or free if you don’t want to use your own domain name), and they have a fantastic online file editor. So you won’t even need to install any software to write the website.

So head over to Neocities and sign up for an account. Neocities has a free tier and a Supporter tier which is $5/month. The free tier will be more than enough to host your simple website, but it will not let you use your own domain name.

I’d recommend signing up for the Supporter account as it supports the Neocities project, but it also allows you to use your own domain name for your website instead of [username].neocities.org. It also allows you yo host more than 1 website if you wish.

For the purposes of this series, I will be using a free account as my domains are already in use. You can view my simple website by visiting https://kevq.neocities.org.

If you already have domain and web hosting arranged, you don’t need to use Neocities. This is just to make things easier for those who are new to web design and hosting.

Moving Forward

That’s it for this post. You now have the basics all set up and ready to start making a website. In the next post we will be looking at setting up a very basic homepage.

Don’t worry though, we will add more to the site as the series progresses.

All My Links

While having a look around Fossotodon, I came across a profile that linked to a site called All My Links. From what I can see, it’s simply a webpage that shows links to all of your online profiles.

I really don’t see the point of a website like this, as they’re open to abuse and therefore offer nothing of value. For example, I just created a page on All My Links and was able to add links to Pewdiepie’s Youtube channel and Kim Kardashian’s Instagram.

My Recommendations

My recommendation would always be to self-host. Get your own domain and set up a simple website that hosts links to your own profiles. Yes, you can still put links to any profile you like on there, but why would you do that on your own domain?

If you don’t want to host your own website, a great alternative is Keybase. It does a similar thing where it funnels links to other profiles into one place, but most importantly, you need to prove you own that profile before adding a link.

Keybase does a lot more than amalgamating your online profiles into one place, but that’s outside the scope of this post. I’ll leave that to you, dear reader, to find out for yourself.

Conclusion

If you want a place to house a list of your online profiles, my first recommendation would be to setup a simple site of your own. Failing that, create a Keybase account and do it there.

I’d strongly recommend staying away from All My Links as it offers nothing in the way of profile validation.