loading...
Cover image for Building My Personal Site with Go and TailwindCSS

Building My Personal Site with Go and TailwindCSS

restoreddev profile image Andrew Davis ・3 min read

Recently, I found the domain andrewdavis.me available for purchase. I tried to buy it in the past, but it was already taken. I quickly purchased the domain, but then I had to decide what to put on it. I made up my mind to build a personal website that would showcase my work and writing. However, I wanted to use it as a learning opportunity and build the site in something unconventional. The two most popular solutions for building a personal site are WordPress or a static site generator. I wanted something in the middle, a site with a backend for post writing and a custom frontend with few dependencies. I built the site using Go with a couple frontend packages including TailwindCSS.

Backend in Go with Gin

I decided to use Go for the backend. In the last few years, Go has become very popular for server apps, particularly micro-services. I chose Gin as a web framework to help with routing and serving templates. Gin has a Sinatra-like syntax that allows you to express a route as a HTTP method and a function to be called for the route.

func main() {
    router := gin.Default()

    router.GET("/", func (c *gin.Context) {
      c.HTML(http.StatusOK, "index.html")
    })
}

I also pulled in Gorm for database access. Gorm allows you to write your tables as Go structs and it will build the columns from the struct fields. Then, you can easily query records based on your struct.

type Post struct {
    gorm.Model
    Name string
    Content string `gorm:"type:text;"`
}

var post Post
db.First(&post)

fmt.Println(post.Name)

All in all, I was successful using Go to build the backend. I like the safety you get with data types and compile checks. The beauty of Go is that if you can get the code to compile, then you have more confidence the app will work. It is also very fast. However, most of the request time is spent querying the database anyway so the real world speed boost is not a significant difference from PHP or Ruby. I had to piece together several packages to get all the features I need, but there are other Go frameworks like Buffalo that offer a more Rails-like experience.

Frontend with TailwindCSS, SimpleMDE, Stimulus and Prism

I used TailwindCSS as my styling framework. I have become a huge fan of Tailwind for all of my personal projects. It takes a little time to adapt to a utility framework, but I love the flexibility and features you get from it. It allows me to build a unique website without much custom CSS. Plus, it comes with some great default color schemes and font stacks.

I used SimpleMDE on the backend to give me a Markdown editor. It was very easy to setup and has worked with no problems.

Also on the backend, I used Stimulus to help me build in a little more interactivity. Stimulus is an excellent framework for server rendered HTML and has become a replacement replacement for jQuery when I need some JavaScript sprinkles. Stimulus is easy to learn and is also much easier to keep organized than jQuery.

Lastly, I used Prism on the frontend to highlight code blocks. It was also easy to set up and run. It allows you to pick which languages you need for highlighting and gives you the options to pick a theme (Tomorrow Night for the win!).

Conclusion

andrewdavis.me is up and running now so please check it out and let me know what you think! While my primary blogging platform is Dev.to, I enjoy having my own site to show my skills and writing. I plan to add a few more pages showing my current projects and past work. I think a personal site is a great way to experiment with new patterns and have some fun with new languages. What languages and libraries have you used for your personal sites?

Posted on Jan 25 '18 by:

restoreddev profile

Andrew Davis

@restoreddev

PHP and JavaScript web chef with a little Go and Swift on the side.

Discussion

markdown guide
 

Tailwind++. I'd like to also recommend PurgeCSS if you're not using that yet.

 

Thanks for the recommendation. I have been wanting to set up PurgeCSS.

 

It's a wonderful tool for sure. Tailwind is the first CSS framework of its kind that I've used (generated completely from a JS config file), so I haven't yet learned to tune the config enough to remove what I don't need while keeping what I definitely want.

PurgeCSS made this far less painful though. Now I do get to keep some variations of things that I'll end up using and completely removing any other class variations that don't appear anywhere in my source.

 

Also, nice and simple idea for your personal site. Simple bio, simple post feed. I may have to look at SimpleMDE for Markdown now too.

 

Awesome! Love seeing the use of Go and Gin; I haven't had the opportunity to get involved with that, or any framework, just yet - I tend to go the way of rolling very simple stuff with gorilla/mux but a framework would be good exposure for me. The site looks fantastic!

 

Tailwind was new to me, looks promising for my next side project so I'll give it a try. Thanks for mentioning it :)

 

It’s definitely worth the time to learn it.

 

Very cool! I just started to plan to build out a site with Go, I may have to check out SimpleMDE!

 

How did you do the code syntax highlight in the posts?

 

You will probably don't need to have a backend if you have a static site. I'm currently building a community site using Gatsby.js and it works great. I will check out Tailwind.css though

 

TailwindCSS is great, thanks for reading!