22 votes

Advice on how to make a personal website

Posted by wise (edited )
Tags: web development, ask, recommendations

Hi,

I want to make a personal website, as basic as possible (I don't even want SEO or stuff like that).

This is totally a personal project, I don't want to generate revenue from it or anything like that (at least for now), I just want an old school website to link it to possible employers and contacts. I have about 12 years of coding experience but mostly low-level (DSP, ASM, C, C++) and scientific code (Python, R, Julia). So I'm not scared of doing it from scratch (even though it will be much uglier in the beginning than pre-generated websites) or using some basic lightweight libraries.

Until now I have been using github pages but I want to put some projects that require server side work, so I'll probably have to host somewhere else. I really like tildes' technical goals, but I don't know if the stack it uses is overkill for a personal website (I know I will need some database for some of the projects though).

My questions are:

  • Is Pyramid a good choice or is it more appropriate for huge multiuser platforms? I do need some level of interaction between users (some of my more artsy projects are related to NLP) as well as interaction between user-server (some projects include simulations with parameters etc.).
  • How does hosting/DNS work? How much should I expect to spend per year? I know there exist hosting services and also places like Heroku, I don't really know the difference between them or what should I be looking for.
  • How much should I worry about security? In other words, what is the threat level? I don't plan to have confidential info in the website, or information about the users (other than a hash value). But should I be worried about other kind of threats?
  • Is making a website as basic as possible and then keep on improving it as time goes a sound plan for a long-term personal project? With this I mean, will it be fun or will it be 100% frustrating and I should just go to (whatever hosting service that has premade web applications) and make my website there even though it will be bloated with scripts and stuff?
  • Is there something I'm not asking that I should be asking? As I said I know how to code but it feels like web development is a completely different beast sometimes.
  • Is there any compelling reason for me to use google analytics, SEO, all that stuff that big websites use? I have never understood the point for it in, for example, github pages.

Thanks for your help! Feel free to correct me on any stupid thing I may have said, I definitely speak from ignorance.

Edit: My biggest issue with this kind of format for conversations is that I cannot thank everybody at the same time, and responding to everyone with a thanks is definitely not contributing anything to the conversation. So I'll put it in an edit. Thanks for all your help! I'll probably be coming for more advice soon...

15 comments

  1. Deimos
    Link
    You definitely don't need Pyramid, it'll be very much overkill. My recommendation would be (assuming you want to use Python): Just start with HTML and CSS! This will probably cover a lot of what...

    You definitely don't need Pyramid, it'll be very much overkill. My recommendation would be (assuming you want to use Python):

    1. Just start with HTML and CSS! This will probably cover a lot of what you want to do for personal pages, and you can host it extremely cheaply or even for free.
    2. When you start wanting to get into more "dynamic" things, first figure out if the page is really dynamic. Maybe you can just pre-generate the HTML locally with something like Pelican? That's what I use for the Tildes Blog and Docs sites.
    3. If it really does need to be dynamic, I'd suggest using Flask. It's a Python web framework that's far simpler than Pyramid, but should still be more than capable for most smaller sites. You can even take the HTML pages you wrote earlier and start turning them into templates for use in Flask extremely easily.
    4. If you need a database, use SQLite. SQLite's quite capable and fast, and doesn't require you to set up an actual database server or any of the more complicated aspects. It should be more than enough for most small/personal sites.
    14 votes
  2. [3]
    RamOfThunder
    Link
    DNS is the map of google.com = 172.217.0.78. Names are more memorable than IP addresses. I pay $5/mo. for a digitalocean droplet (server). My domain name is about $10/yr through namecheap. For me,...

    How does hosting/DNS work? How much should I expect to spend per year? I know there exist hosting services and also places like Heroku, I don't really know the difference between them or what should I be looking for.

    DNS is the map of google.com = 172.217.0.78. Names are more memorable than IP addresses.

    I pay $5/mo. for a digitalocean droplet (server). My domain name is about $10/yr through namecheap. For me, I add dns entries to digitalocean to forward that domain name to my droplet.

    The times I've tried Heroku I've run into the problem of wanting some different configuration on the server versus my own machine. Usually I create an external configuration file and some environment variables to accomplish this. The Heroku workflow seems to be checkout code, build code, and done. But that would mean having configuration in git which doesn't appeal to me.

    How much should I worry about security? In other words, what is the threat level? I don't plan to have confidential info in the website, or information about the users (other than a hash value). But should I be worried about other kind of threats?

    It's a never ending battle and depends on how far you want to get into it. Keeping your software up to date w/ patches is important -- known vulnerabilities make you an easy target. You can search for CVEs related to the products you're using to try and mitigate risks. Depending on the functions of your site you could get into XSS/CSRF territory that you will have to code around.

    Is making a website as basic as possible and then keep on improving it as time goes a sound plan for a long-term personal project? With this I mean, will it be fun or will it be 100% frustrating and I should just go to (whatever hosting service that has premade web applications) and make my website there even though it will be bloated with scripts and stuff?

    Yes, absolutely. Every project starts simple and evolves.

    It may depend on the person, but I love start at the basic level and building up from there (fun). Other people's boilerplate projects are impossible for me to use. There's also the problem of when something inevitably breaks, how do I fix it (100% frustrating)? When I own the stack it's much easier for me to dig through it.

    11 votes
    1. [2]
      time
      Link Parent
      The domain name setup above and digitalocean droplet are what I use for my personal blog. As for security, digitalocean has some great guides on setting up key-based ssh logins and a simple...

      The domain name setup above and digitalocean droplet are what I use for my personal blog. As for security, digitalocean has some great guides on setting up key-based ssh logins and a simple firewall to protect your server from most basic attacks. These should work even if you go with another server provider.

      For me, I wanted something simple to update, and my friends in the infosec community recommended Bolt CMS for my website's back end. It functions similarly to wordpress on the back end, but lighter and more secure. There are free themes available for it to get you close to what you might want your site to look like, and you can modify from there. It took a bit of a learning curve and initial setup to get it working (pay attention to the docs about file permissions), but now I can just add pages from a web interface and it's easy to update the look of the site independent of the content.

      Edits were just to clarify wording and fix links.

      6 votes
      1. Emerald_Knight
        Link Parent
        Pro tip: if you do IP whitelisting in your firewall setup, consider using digitalocean's cloud firewalls. They're free, and you won't get locked out of your droplet if your IP changes!

        Pro tip: if you do IP whitelisting in your firewall setup, consider using digitalocean's cloud firewalls. They're free, and you won't get locked out of your droplet if your IP changes!

        6 votes
  3. [2]
    Soptik
    (edited )
    Link
    Just an advice: consider using Bootstrap. It's one of the most popular CSS libraries - this way, you don't have to write CSS from scratch (it's painful sometimes). There are multiple variants of...

    Just an advice: consider using Bootstrap. It's one of the most popular CSS libraries - this way, you don't have to write CSS from scratch (it's painful sometimes). There are multiple variants of bootstrap, look at it and learn how to use it, it'll speed up website development so much.

    You can even customize bootstrap to make it look like you want (like changing color shades (the library itself has preset colors, I just wanted to say that you can change everything in bootstrap to make it look like you want)). You'll learn bootstrap in just few hours and it'll help you a lot.

    8 votes
    1. name
      Link Parent
      One of the things I very much like about Bootstrap is how well its paradigm supports different sized viewports, rather than having logic per screen size. So having a mobile site doesn't just mean...

      One of the things I very much like about Bootstrap is how well its paradigm supports different sized viewports, rather than having logic per screen size. So having a mobile site doesn't just mean you have to redirect to m.website.com and maintain two different sites.

      Plus, since we live in the stackoverflow age of learn-by-example, the examples page has some nice variation to learn off.

      2 votes
  4. [5]
    Comment deleted by author
    Link
    1. [4]
      wise
      Link Parent
      Yeah sure, I want to host different projects (I didn't want to bore you all with my dumb projects haha): Some projects are just links to papers, or at most some mathematical simulations and cool...

      Yeah sure, I want to host different projects (I didn't want to bore you all with my dumb projects haha):

      1. Some projects are just links to papers, or at most some mathematical simulations and cool visualizations.
      2. Some projects are more artistic, for example something like stir-fry texts, but still all interaction is between user and website.
      3. Some projects require a database (albeit a simple one), for example I am working on an on-line exquisite corpse where people will see a random sentence someone else has written and continue the story.
      4. Some involve training (offline) and using (online) a neural network (for word embeddings, image creation, etc.).

      Hope this clarifies a bit. Feel free to pass judgement on the projects too :-P .

      8 votes
      1. [3]
        samhh
        Link Parent
        I personally would create a small portfolio separate from those projects and possibly make the projects accessible at subdomains with Nginx. You can see I've done that here with a small blog I...

        I personally would create a small portfolio separate from those projects and possibly make the projects accessible at subdomains with Nginx. You can see I've done that here with a small blog I made available at the blog subdomain.

        My motivation for this approach is that it allows your portfolio to remain lean and lightweight, and gives you more flexibility should you want to change things up. For example, my portfolio is built with Node with the data coming from a simple JSON file (source), and I don't really want to complicate that. At the same time, I'm free to make my blog or any other projects infinitely more complex; in this case my blog is just another Node app, but it could this way easily be Bolt, Wordpress, whatever. If I want to mess around with building a Rust web server tonight and deploy it, I can do so without touching my portfolio. For all intents and purposes, these projects are separate like they should be.

        Would be curious to hear any criticisms of this approach.

        2 votes
        1. [2]
          wise
          Link Parent
          Huh sounds interesting and I hadn't considered that. So to give an example, if I have a project that needs SQL I would host it and link it from there? And this would be all from the same...

          Huh sounds interesting and I hadn't considered that. So to give an example, if I have a project that needs SQL I would host it and link it from there? And this would be all from the same digitalocean droplet for example? Or am I misunderstanding?

          (really like your website and blog btw)

          3 votes
          1. samhh
            Link Parent
            Thanks! My last portfolio was very noisy ("modern"), I tried to make these much more minimalist, performant, and focused on the content. I personally would do it within the same droplet yes, for...

            Thanks! My last portfolio was very noisy ("modern"), I tried to make these much more minimalist, performant, and focused on the content.

            I personally would do it within the same droplet yes, for the sake of saving money (really, how many people are going to be looking at my stuff?). You could look into containerisation (e.g. Docker), but I don't think that's necessary for stuff like ours. As long as there isn't conflicting software between your projects (e.g. you can only install one version of PHP and two projects require different versions), you'll be fine with this approach.

            You'd then map each application to a subdomain one way or another. In my case these are both Node apps running in the background on their own ports so I bind each subdomain to the relevant port in Nginx. Here's the Nginx config I'm using (probably a bad config, DevOps not my day job haha):

            # Root / portfolio
server {
        server_name www.samhh.com;

        location / {
                proxy_pass http://localhost:8080;
        }

        listen 443 ssl http2;
        listen [::]:443 ssl http2 ipv6only=on;

        ssl_certificate /etc/letsencrypt/live/samhh.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/samhh.com/privkey.pem;
        include /etc/letsencrypt/options-ssl-nginx.conf;
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

# Blog
server {
        server_name blog.samhh.com;

        listen 443 ssl http2;

        location / {
                proxy_pass http://localhost:8081;
        }
}

# Redirect HTTP to HTTPS
server {
        server_name www.samhh.com

        listen 80;
        listen [::]:80;

        return 301 https://www.samhh.com$request_uri;
}

server {
        server_name blog.samhh.com;

        listen 80;
        listen [::]:80;

        return 301 https://blog.samhh.com$request_uri;
}

server {
        server_name samhh.com;

        listen 80 default_server;
        listen [::]:80 default_server;

        return 301 https://www.samhh.com$request_uri;
}
            1 vote
  5. Akir
    Link
    Don't waste money on hosting services. There are some that are a decent value, but they restrict your freedom. DigitalOcean is what most webdevs choose when they need to get server-side...

    Don't waste money on hosting services. There are some that are a decent value, but they restrict your freedom.

    DigitalOcean is what most webdevs choose when they need to get server-side processing, but I'll tell you how to start with AWS because that's what I know and it offers a "free tier" that lasts for ~1 year (IIRC). They also have pretty good documentation that should help you out with the specifics, since I'm just going to leave you with an outline.

    Start an account with AWS, log into the web console, go to the EC2 section and create an instance. I would strongly recommend Linux, though Windows is an option, and I would more specifically recommend either Debian or Ubuntu - but go with your preferred distro, if you have one. AWS will set up a virtual server for you and give you a certificate file that you will need to access your server.

    SSH into your server and get set up by installing your web server and anything else you need. I'm old fashioned, so I'm still using Apache, but Nginx is actually better for a number of reasons. There tends to be more documentation available with Apache as a use case. You will also need to install some additional software depending on how you plan on implementing your software. You mentioned needing a database, so I will recommend you use mySQL - once again, it's got the most documentation.

    You will also need to purchase a domain and point it's A record to your server. You can do this a number of different ways, but since you're already paying Amazon, I'll get you started with them. Their DNS service is called Route56; you can buy your domain there as well. You will want to create a hosted zone after you purchase the domain and then set the A record to your server's external IP address. You don't actually have to do this, though: your server is automatically assigned a (very ugly) domain.

    The last thing you will need to do is to edit your security settings in the EC2 control panel to let in HTTP and HTTPS traffic. I would also suggest installing certbot on your computer; that will provide you with free automatically updating TLS certificates that allow you to use HTTPS.

    6 votes
  6. [2]
    nic
    Link
    shared hosting will get you up and running faster, a vps gives you complete flexibility but now you have to worry more about security. for a simple static website, i really love getskeleton.com -...

    shared hosting will get you up and running faster, a vps gives you complete flexibility but now you have to worry more about security.

    for a simple static website, i really love getskeleton.com - plus a simple text editor, ftp and some basic html & css knowledge.

    use namecheap for domains

    SEO is mostly about sharing great content. Once you get a few thousand visitors a month, you will probably want to add Google Analytics.

    5 votes
    1. Shahriar
      Link Parent
      Skeleton is very interesting, do you know any other similar minimal frameworks?

      Skeleton is very interesting, do you know any other similar minimal frameworks?

      1 vote
  7. KapteinB
    Link
    I don't really have answers for most of your questions, but I do have some personal experience. Whenever I need to set up a simple web site quickly, I just download a theme I like from html5up and...

    I don't really have answers for most of your questions, but I do have some personal experience.

    Whenever I need to set up a simple web site quickly, I just download a theme I like from html5up and add my content to it. This is pure html/css, so all you need to do it upload it to a web server and point your domain name towards it.

    If I need something more advanced, or I want to easily be able to make changes to the web site, I use Wordpress. This requires a SQL server, so it's a bit more hassle to set up.

    3 votes
  8. Happy_Shredder
    Link
    Grab a domain name from somewhere like Namecheap. Grab a 5$ digital ocean droplet, running Debian of whatever you're familiar with. Install nginx, fail2ban (this will stop script kiddies et al) ,...
    • Grab a domain name from somewhere like Namecheap.
    • Grab a 5$ digital ocean droplet, running Debian of whatever you're familiar with. Install nginx, fail2ban (this will stop script kiddies et al) , and logwatch (to let you know if something's wrong) . Keep it updated.
    • Write your site in bare HTML5 and CSS. Maybe you have something to show off and need some JS. For blog style posts, write in Markdown and transpile using pandoc. You can include ad hoc HTML, CSS, and js it need be.
    • Stick it all in the HTML root, use a simple nginx config. Be sure to setup lets encrypt, with a redirect from http to http2/tls. Maybe include some compression in the config too. Maybe think about sticking the whole project in a git repo. As you play around, maybe setup some simple scripts to automate things.

    This is along the lines of how I run my personal sites. I'm happy to share some example configs if it's useful.

    1 vote