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?

Discussion

pic
Editor guide
Collapse
jsn1nj4 profile image
JSn1nj4β€β€πŸ‘¨β€πŸ’»

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

Collapse
jsn1nj4 profile image
JSn1nj4β€β€πŸ‘¨β€πŸ’»

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.

Collapse
restoreddev profile image
Andrew Davis Author

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

Collapse
jsn1nj4 profile image
JSn1nj4β€β€πŸ‘¨β€πŸ’»

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.

Collapse
darksmile92 profile image
Robin Kretzschmar

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

Collapse
restoreddev profile image
Andrew Davis Author

It’s definitely worth the time to learn it.

Collapse
forstmeier profile image
John Forstmeier

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!

Collapse
atrandafir profile image
Alexandru Trandafir

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

Collapse
theodesp profile image
Theofanis Despoudis

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

Collapse
shindakun profile image
Steve Layton

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

Collapse
restoreddev profile image
Andrew Davis Author

TailwindCSS is great, thanks for reading!