How to create a free portfolio and blog site

Learn how to create a fast, secure site for free (without throttling!) using open source software.

As an artist, one of your more important tasks is to create and maintain a strong web presence. A good way to do that is making a portfolio or blog site.

I’ve done a lot of research for different free blog platforms. There’s a lot of nice pros to a lot of those options, but you do pay in some way, mostly in terms of control and customization. Having control is pretty important for long term growth.

There’s places like:

• Wix & Weebly which both seem to offer pretty strong free plans. They have nice website builders and are not that hard to use. The reason I do not really recommend these is because the free plan ties you down and it’s generally more expensive to use these than set up a hosting + Wordpress.org situation.
• Blogger & wordpress.com are pretty good, but also have limitations on what you can and cannot do with your site.
• Social media like tumblr & instagram I feel are better for promoting, or serving as a parallel to your main site. I actually started with just a tumblr, but decided to switch to something I made myself.

Honestly, I think it’s easier to just dive deeper in a choose something where you have more control straight away. Then you do not need to bother with redirects and remapping once you decide you outgrew your free platform. For simple portfolios that will not change that much, maybe go for a free option with limited options.

Most people will probably recommend hosting + Wordpress.org site. I do, but I prefer to not pay for hosting at this point because I have other things to pay for (college!). I do recommend wordpress for a lot of people, but if you want a slightly cheaper, more hands on site, this is the guide for you! You also can use Wordpress.org and host for free by converting it to a serverless site.

My solution right now required more research, is not as easy to use, but is faster and more secure than a Wordpress site… The answer for me was learning how to use a serverless static site generator. All I pay for right now is the domain name, which for now, is $5 on namecheap. This method is a bit scrappy, but I think it was worth it. Plus, you get to learn a lot while doing it, and have a site you were heavily involved in actually building, which is awesome and something to be proud of.

Before we get into the details, my current set up is: Hugo + Netlify (static site host/CDN)+ Forestry (CMS/ manage your content easily with a visual interface).

Note: This guide requires you to do some technical stuff, but it is not that bad because the devs write clear documentation. I am not a programmer, and I was able to set up this site with trial and error and research.

Components of the Art-Res Site

Okay, ready to dive deep? It will seem like a lot, and there’s tons more information that you can read online if you want to go down the same rabbit hole I did in making this project.

The static site generator

Okay, this site serves static files to you. This means there is not database to hack and all that is served is static HTML files, generated by plain text documents. Your site can be “dynamic” in a way, with a lot of nice plugins powered by Javascript. The plus is that you don’t have backend security issues like you do with a wordpress site. There’s nothing there to hack.

Here’s a nice explanation of why to use a static site generator. You can google it and go down a minor rabbit hole, if you wish! There’s also this lovely book.

Which one to choose?

There’s a ton. I really recommend looking at the feature set of each and trying to decide what you want to use. Since your content files will probably be written in markdown, it really is not that impossible to try out a few different static site generators.

Please read: a leaderboard of open source static site generators staticgen + this list: awesome static site generators.

I chose Hugo because it’s fast and it offers a lot of options. If I had to do it over again, I might choose Gatsby or Hexo, but honestly Hugo is really powerful and speedy. Some developers I talked to made me feel like Hugo is a good choice, thankfully. Plus the developer, Bep, churns out releases very often and there’s a great support community.

Getting started

Now, to get started, you can either start the project locally with the command line (like copying & pasting in two lines and hitting enter) or go to staticgen and click Deploy to netlify, which is where we are going to host the site anyways. After you sign up, it’s just one click and wait!

Note: I made this project in a pretty haphazard way, but the following demo shows you how I would have done it, if I were to do it again. If you need help, I can! Just contact me. :D

You also have a template picker option by the lovely netlify people.

Here, I did it with the casper blog template, just as an example. You can choose others, of course! When you hit deploy to netlify, you will need to create a GitHub amount so you can set up your repository.

Now we wait until the robots deploy the site…

For step 2. You should probably buy your own domain. It looks a lot more professional. If you can, go for a dot com. I went for an xyz because I wanted to save money, and I mildly regret it. However, it’s not hurting my traffic too badly.

I like name cheap. It’s really easy to configure the domain name to netlify’s servers. This guide by netlify is really clear.

If you do not want to buy your own domain, you can host the site for free and customize the subdomain with a .netlify.com subdomain. Just look at the picture below:

.

Now under site information, you are going to change site name.

So now when I click the newly changed name of https://lovelydemo.netlify.com, I see this:

Setting up the CMS

CMS = content management system.

Useful because:

An easier way to customize everything than heading to the GitHub repository and change the templates and all of that. (W)hat I did to make the https://artres.xyz site, but I will save that for a different day! :D )

Easier method if your site is built on hugo or jekyll. (like the template!)

Go the lovely Forestry.io site and make an account.

1. Add site
2. Import existing site
3. Generator - choose correct one. If you used the template from the above steps, you’re going to choose hugo. Version doesn’t matter bc we are using netlify.
4. Sync Repo from GitHub
5. Choose the right repo!
6. Next, locate project root directory with the config file. If you have followed all the steps so far, you’re going to have it located at: /site
7. Name & URL can be whatever, most of our settings are on netlify anyways.
8. For hosting info, choose commit to source repo only!
9. Save!
10. Now you can go ahead and configure your site with the lovely GUI from Forestry!
11. First thing I recommend is going into Site Params under Data and change all the defaults. Click publish when you’re done.
12. Now add content and pages as you see fit.

Netlify CMS = more steps but compatible with other generators besides hugo and jekyll

1. If you used the template I used, you can just go https://yourdomain.netlify.com/admin and log into the CMS like you would if you were configuring a wordpress or blogger site.
2. However, we first need to go and set up a OAuth2 token for our GitHub account.
3. Open a new tab, and now follow the instructions at this guide. It doesn’t take that long.
4. Once you do that, you can now log in and access your CMS.

Maybe Learn Markdown

After setting up the markdown file in Forestry, which is nice because it auto populates the date and I don’t need to manually write in anything thanks to the archetypes, I go ahead and pull my Github Repo (please google this term if you’re interested in this type of workflow) and edit the actual markdown file in a markdown editor. For me, it’s the gorgeous typora but you have about 5 million options to choose from. Many are free and open source software projects.

Here’s a nice markdown cheatsheet by the creator, John Gruber.

Markdown is pretty lit because it allows you to write things in plain text (no vendor lock in), while still being able to see the structure of your file. When it’s processed, the output will be lovely HTML, which you can further style with CSS. There’s a lot of ‘flavors’, but it’s not too bad because they aren’t super different.

Next Steps

• Add more content! If you’re stuck, consider reading this post about brainstorming tips.
• Promote your new site on social media channels! I also wrote about how to market your art the right way. I also can help you promote your artwork w/ a paid art promotion.
• Learn how to modify your theme by diving into the folder structure from GitHub, there’s extensive documentation everywhere. If you have specific questions, please ask me! :D There’s so many different options it’s hard to link just one specific place.
  • My theme is a very heavily modified version of after dark. I replaced a majority of the CSS, but the HTML templates are great.
• Definitely read this guide by Github.

Prefer Wordpress?

You definitely have options, though you will need to pay for hosting unless you do Wordpress as a CMS and serve static files.

WP Engine is a highly regarded Wordpress hosted solution that would definitely simplify things for you. Sign up for a WP Engine plan and receive the Genesis Framework and 35+ StudioPress Themes free!

---

I hope this helped, thank you for reading! Please contact me with any questions! :D Also, feel free to promote yourself at the art index / community board.