Building My Personal Site With Go and TailwindCSS

Andrew Davis

Dec. 17, 2018 • 5m 18s

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?