15 votes

How should I make my personal website?

I am not a developer, but I do have interesting in learning.

A while ago I asked a question similar to that. I did not take any concrete action since then, and now have some new information to add.

The website shall be called myactualname.com, and will contain about/biography, and a few sections containing articles that I wish to write on different subjects.

That can probably be done without coding on one of the many free blogging platforms currently available, such as Medium, Wordpress, and Substack, but the lack of control is unfortunate.

At the same time, I wish for this website to last a long time, and to be reasonably independent of maintenance. With the Brazilian Real valued at less than one-fifth of the US dollar, hosting prices skyrocketed. Besides, I cannot always rely on my own ability to stay on top of that kind of thing, so it would be beneficial for my web presence to be more resilient than my bank account and mental state. I figure that hosting it on Github Pages, Gitlab Pages (or both) would be a good way to avoid ever going down (it looks like duplicate content is bad for search engines, though, so I might keep one of those private, just for backup reasons). And I could reserve the domain for two or three years in advance.


I really like simple text-focused personal websites like this one. They load fast and are easy to read, but are generally not very pretty or responsive. I have basic notions of HTML and CSS and intend to learn more.

In the previous post, someone suggested using Hugo, which seems like a good option. On the other hand, for something that simple, I wonder what would be the downside of simply coding it from scratch. One thing I know for sure is that I want this website to be rather permanent: whatever changes I ever do to its design should not impact accessibility to previous content (link rot). How can I achieve that? No idea.

Since I write in English and Portuguese, the website must be bilingual. I'm not sure how to implement or manage that, especially in regards to search engines.

I resumed the course on Free Code Camp, which I expect will help in achieving all that.


With that in mind, I reiterate my question: should I make my personal website? Should I just use a free blogging platform? Should I use Hugo or something similar? Any particular free CMS? Or maybe just use what I learn to code it from scratch?

Thanks!

30 comments

  1. [2]
    Liru
    Link
    The key term you're going to want to search for is static site generator for further research. Hugo is a good choice, but it's got some weird quirks that put me off. One of the few bloggers I read...

    The key term you're going to want to search for is static site generator for further research.

    Hugo is a good choice, but it's got some weird quirks that put me off.

    One of the few bloggers I read uses Pelican for their blog, and it apparently works pretty well.

    I've heard good things about Zola. I've used it for a few articles on a small web page, so I can't say how well it will scale, but it seems decent enough. It even has multilingual support although I haven't used it.

    Github Pages uses Jekyll by default, but you can set it up so that Github Actions automatically generates your site using whichever SSG you want, so it's not a big deal.

    No matter what you choose, (most?) static site generators tend to have a way to style the site and articles with custom HTML/CSS templates, so one thing you may want to look into is the templating syntax each one uses to render it, and see which fits you best. They also have methods to manage automatic linking and avoiding link rot, so you shouldn't worry too much about that.

    12 votes
    1. mrbig
      Link Parent
      Cool. I wonder if I should revisit the basic HTML/CSS/JS course before proceeding, or if I should just jump to the tutorials. I'm afraid that doing so might lead to some bad decisions, creating...

      Cool.

      I wonder if I should revisit the basic HTML/CSS/JS course before proceeding, or if I should just jump to the tutorials. I'm afraid that doing so might lead to some bad decisions, creating problems later on.

      2 votes
  2. [2]
    kfwyre
    Link
    It might not offer you as much control as you’d like, but write.as is a very nice and dead simple blogging platform.

    It might not offer you as much control as you’d like, but write.as is a very nice and dead simple blogging platform.

    6 votes
    1. mrbig
      Link Parent
      I really like write.as, but I wish to have something that resembles more of a personal website, with sections and stuff. Thanks.

      I really like write.as, but I wish to have something that resembles more of a personal website, with sections and stuff. Thanks.

      2 votes
  3. archwizard
    (edited )
    Link
    I've been pretty happy with Hugo on my personal site, but I've never really been fond of web design, so I just wanted something where I could just do minimal tweaks to the theme, and Hugo's been...

    I've been pretty happy with Hugo on my personal site, but I've never really been fond of web design, so I just wanted something where I could just do minimal tweaks to the theme, and Hugo's been good for that.

    I'm not fluent in another language (silly American education), but I do know that Hugo, and many Hugo themes have support for translation and multilingual sites/posts. Here's some cool stuff I found: https://gohugo.io/content-management/multilingual/ https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/

    someone suggested using Hugo, which seems like a good option. On the other hand, for something that simple, I wonder what would be the downside of simply coding it from scratch.

    The main reason I like the markdown static site generators, rather than just trying to code from scratch is because I like to divorce the writing from the making of a website. If I try and write a page in HTML, I just get bogged down with the formatting, plus dealing with the header and footer is just a distraction. Whereas, if I write in markdown, it's easier for me to stay focused on the writing. It's also handy, since a lot of the writing I do starts as markdown notes that I take on CTF challenges or other things like that. So often, I can copy-paste my notes into a Hugo page and have a really great foundation.

    5 votes
  4. [2]
    cla
    Link
    Not being a developer myself, I've been also there. In my view, you should try something called Eleventy. It's simple and fun. I tried jekyll in the past and later I tried to use Gatsby, but it...

    Not being a developer myself, I've been also there. In my view, you should try something called Eleventy. It's simple and fun. I tried jekyll in the past and later I tried to use Gatsby, but it was a nightmare to me.

    4 votes
    1. eladnarra
      Link Parent
      I second Eleventy - I haven't used it yet myself, but it's the generator I plan to use on my personal site, in part due to their focus on accessibility.

      I second Eleventy - I haven't used it yet myself, but it's the generator I plan to use on my personal site, in part due to their focus on accessibility.

      1 vote
  5. [5]
    Keegan
    Link
    While Hugo has many themes that are readily available, you are also able to make your own theme. This is a little more work in initial creation of the site: Create files in the layouts/partials/...

    someone suggested using Hugo, which seems like a good option. On the other hand, for something that simple, I wonder what would be the downside of simply coding it from scratch.

    While Hugo has many themes that are readily available, you are also able to make your own theme. This is a little more work in initial creation of the site:

    1. Create files in the layouts/partials/ directory for each major element of the site (nav, header, main, footer). You can style these as you want.
    2. Make two files that basically you just put the names of those layout files in them in order, and hugo will build them into full pages.
    3. Make your actual content.

    The nice thing about this is that if you ever want to change what your footer says, then you just have to edit it in one place, rather that going to EVERY page you have the footer on.

    So long as you don’t change the file names of the content or the folder they are in, links shouldn’t change.

    GitHub pages is great, and an alternative you can use is Netlify so you have more options.

    Hugo’s documentation is pretty poor in my opinion, but basic Hugo usage is achievable through Google searches.


    I’m not sure how to do multilingual posts on Hugo, but you could probably do in your URL domainname.tld/en/posts/postname and domainname.tld/pt/posts/postname and have a en and a pt folder with individual files for each post.

    3 votes
    1. [2]
      plett
      Link Parent
      For that, you would want this page: https://gohugo.io/content-management/multilingual/ Hugo's documentation is very good. I've used Hugo for a few small sites and have always found that the...

      I’m not sure how to do multilingual posts on Hugo

      For that, you would want this page: https://gohugo.io/content-management/multilingual/

      Hugo's documentation is very good. I've used Hugo for a few small sites and have always found that the problems I encounter are common enough for answers to be in the documentation.

      3 votes
      1. mrbig
        Link Parent
        I don't know if I agree. I tried my hand at it today. I did manage to get a prototype online, but there are lots missing from the docs. I am not a developer and from my point of view, the...

        I don't know if I agree. I tried my hand at it today. I did manage to get a prototype online, but there are lots missing from the docs. I am not a developer and from my point of view, the documentation is sparse. I get the impression that Hugo is not really targeted towards people like me. So I end up following random tutorials, whose quality I can't really judge.

    2. [2]
      mrbig
      (edited )
      Link Parent
      If I choose an already made Hugo theme, does the theme need continuous support? I mean, will I depend on the developer to update it to remain compatible with future versions of Hugo? Or is it a...

      If I choose an already made Hugo theme, does the theme need continuous support? I mean, will I depend on the developer to update it to remain compatible with future versions of Hugo? Or is it a set and forget kind of thing? I purchased a WordPress theme once and when my support period ended, I couldn't update to make it compliant with a new version of WordPress. I'd like to avoid that.

      2 votes
      1. Keegan
        Link Parent
        I do not believe that the theme necessarily needs continuous support. So long as Hugo doesn’t change the formatting requirements for theme configuration, it should keep working between updates....

        I do not believe that the theme necessarily needs continuous support. So long as Hugo doesn’t change the formatting requirements for theme configuration, it should keep working between updates. And if it does break, there is nothing stopping you from going back to an old version of Hugo.

        With my theme I use I haven’t had to update it to fix any breaking issues since I made it.

        2 votes
  6. Shahriar
    Link
    If you're a student, sign up for GitHub's Student Developer pack. This will warrant you great benefits: $100 in credit for DigitalOcean droplets which you can use to host your entire site...

    If you're a student, sign up for GitHub's Student Developer pack.

    This will warrant you great benefits: $100 in credit for DigitalOcean droplets which you can use to host your entire site including any content on it up to 1TB in bandwidth a month for $5; You can obtain more free domains with your name from various registrars.

    I would use a static site generator like Jekyll or Hugo. No need for creating and formatting individual HTML pages for any and all webpages on your site. Previously did this before using static site generators which I thought weren't needed and would do the exact thing, I was wrong. Instead, it will import all of your formatting including your headers and footers displayed with the content you're writing in markdown and exports this to your web server directory. This helps prevent link rotting as you've mentioned as any changes will reproduce across all your pages too.

    If low maintenance is the biggest priority, I would go with a GitHub page and implement the same Jekyll setup through a repository. The only downfall to doing this, you are restricted in other use for your website, such as a reverse proxy through nginx or image hosting. Additionally, if more extensive configuration is needed for your webpage like HTTP headers to implement a Content Security Policy, I do not believe GitHub pages offers that flexibility.

    3 votes
  7. [5]
    pumasocks
    Link
    My use case is a bit different, but I’d appreciate the feedback. My wife recently started producing artwork again and she needs a site that has a gallery and a shopping cart. Customers should be...

    My use case is a bit different, but I’d appreciate the feedback. My wife recently started producing artwork again and she needs a site that has a gallery and a shopping cart.

    Customers should be able to see what products are available and purchase them.

    Thanks for any ideas.

    3 votes
    1. [2]
      stu2b50
      Link Parent
      Shopify or everyone’s favorite podcast sponsor Squarespace would be good fits. Shopify is a more powerful e-commerce platform while squarespace is better at letting layman consumers produce good...

      Shopify or everyone’s favorite podcast sponsor Squarespace would be good fits. Shopify is a more powerful e-commerce platform while squarespace is better at letting layman consumers produce good looking websites

      Those are both platform services, though, so you’ll have to pay them and/or they’ll take revenue cuts.

      Unfortunately e-commerce is a lot more complicated than a personal webpage so just static isn’t going to cut it, and doing it yourself would require substantial dev work, not to mention admin know how.

      6 votes
    2. [2]
      Adys
      Link Parent
      Shopify, and consider opening an Etsy shop as well. Stripe will also let you create payment links nowadays, i absolutely recommend opening an account with them as you'll probably need to...

      Shopify, and consider opening an Etsy shop as well.

      Stripe will also let you create payment links nowadays, i absolutely recommend opening an account with them as you'll probably need to regardless for Shopify.

      2 votes
  8. [2]
    hungariantoast
    (edited )
    Link
    Do you still use Emacs and Org-mode? If so, here are some things you might want to check out: weblorg - "A Static HTML Generator for Emacs and Org-Mode" emacs-easy-hugo - "Emacs major mode for...

    Do you still use Emacs and Org-mode? If so, here are some things you might want to check out:

    • weblorg - "A Static HTML Generator for Emacs and Org-Mode"
    • emacs-easy-hugo - "Emacs major mode for managing hugo"
    • ox-hugo - "Org mode to Hugo exporter. Write your Hugo posts in native Org mode"
    3 votes
  9. [9]
    mrbig
    Link
    Another question: is there a cheap/free to permanently host images that I use on my website?

    Another question: is there a cheap/free to permanently host images that I use on my website?

    2 votes
    1. Akir
      Link Parent
      Most of the really big providers have storage services in the vein of Amazon’s S3 service, which lets you pay just for the storage and bandwidth. That tends to be a pretty decent way to serve any...

      Most of the really big providers have storage services in the vein of Amazon’s S3 service, which lets you pay just for the storage and bandwidth. That tends to be a pretty decent way to serve any kind of static media.

      3 votes
    2. suspended
      Link Parent
      I use the basic droplet at Digital Ocean. It's only 5 dollars per month and I host my entire site, including images, there.

      I use the basic droplet at Digital Ocean. It's only 5 dollars per month and I host my entire site, including images, there.

      2 votes
    3. [6]
      petrichor
      Link Parent
      If you end up using GitHub Pages, just stick them in an img folder near your HTML and Markdown files. Free and forever.

      If you end up using GitHub Pages, just stick them in an img folder near your HTML and Markdown files.

      Free and forever.

      2 votes
      1. [5]
        mrbig
        Link Parent
        Cool. I wonder if I'll ever run out of space though. I plan to post some film analysis with large screenshots.

        Cool. I wonder if I'll ever run out of space though. I plan to post some film analysis with large screenshots.

        1 vote
        1. [3]
          Keegan
          Link Parent
          If you start approaching the 1 GB limit of a GitHub repository, then you could always use something like CubeUpload which is free and doesn’t compress your images like Imgur does.

          If you start approaching the 1 GB limit of a GitHub repository, then you could always use something like CubeUpload which is free and doesn’t compress your images like Imgur does.

          2 votes
          1. [2]
            mrbig
            Link Parent
            I see. How permanent/resilient should I expect a free service like that to be? I'm now looking into a way to have some kind of backup, so the image won't fail to load. Maybe use a nonerror event?...

            I see. How permanent/resilient should I expect a free service like that to be? I'm now looking into a way to have some kind of backup, so the image won't fail to load. Maybe use a nonerror event? There's nothing worse than a website that fades away...

            1 vote
            1. Keegan
              Link Parent
              CubeUpload has been around for a bit, but you should probably upload to somewhere else as a backup. Google Photos, Imgur, etc all work. If you aren’t expecting to use TONS of pictures, you could...

              CubeUpload has been around for a bit, but you should probably upload to somewhere else as a backup. Google Photos, Imgur, etc all work. If you aren’t expecting to use TONS of pictures, you could honestly just put them onto GitHub though (try to stay under 1GB total). And if you are putting them on GitHub, run the images through https://squoosh.app/ first, since that will dramatically reduce file size while also keeping a good quality.

              3 votes
        2. petrichor
          Link Parent
          Git Large File Storage is an option, although I wouldn't set it up until you really need it.

          Git Large File Storage is an option, although I wouldn't set it up until you really need it.

          1 vote
  10. crdpa
    (edited )
    Link
    I'm also from Brazil and i host my website on github. Here it is: https://crdpa.net I just write my pages with markdown and convert using a custom bash script i wrote and just push to the repo....

    I'm also from Brazil and i host my website on github. Here it is: https://crdpa.net

    I just write my pages with markdown and convert using a custom bash script i wrote and just push to the repo.

    The only cost is Google Domains.

    2 votes