--- type: "article" title: "Building a Static Site With WordPress and Netlify" summary: "This is how I built a fully static website by using a combination of tools to streamline the process. There are going to be links for more in-depth explanations to each step.\n\n\nUpdates-\n\nI have been using the same basic technique but I have moved to Laragon which has way better performance than Netlify.\n\n\n\n\nIngredients\n\n * Local by flywheel\n * WordPress\n * Theme\n * Wp-to-static plugin\n * Netlify hosting with GitHub integration\n\nFirst, let me explain why I went this route. I needed to get my phot" newsletter: "Pup On Tech" newsletter_handle: "pup-on-tech" newsletter_url: "https://usecommune.com/n/pup-on-tech" author: "Avrohom Gross (@pupontech)" published: "2019-07-23T02:57:34.000Z" canonical_url: "https://usecommune.com/n/pup-on-tech/a/building-a-static-site-with-wordpress-and-netlify" markdown_url: "https://usecommune.com/n/pup-on-tech/a/building-a-static-site-with-wordpress-and-netlify.md" chat_url: "https://usecommune.com/n/pup-on-tech/a/building-a-static-site-with-wordpress-and-netlify/chat" source_url: "https://pupontech.com/building-a-static-site-with-wordpress-and-netlify/" body_source: "imported" likes: 0 replies: 0 body_words: 691 --- # Building a Static Site With WordPress and Netlify This is how I built a fully static website by using a combination of tools to streamline the process. There are going to be links for more in-depth explanations to each step. ## Updates- I have been using the same basic technique but I have moved to [Laragon](https://laragon.org/) which has way better performance than Netlify. ![](https://cdn.synaps.media/pupontech/content/images/wordpress/2019/07/kitchenware-ingredients-cartoon_24640-26689.jpg) ### Ingredients - [Local by flywheel](https://localbyflywheel.com/) - [WordPress](https://wordpress.org/) - Theme - [Wp-to-static plugin](https://wordpress.org/plugins/static-html-output-plugin/) - [Netlify](https://www.netlify.com/) hosting with [GitHub](https://github.com/)integration First, let me explain why I went this route. I needed to get my photography site up extremely fast. I wanted a clean minimalist website with extremely fast load times hence the reason why I went static. I also needed something where most of the HTML and CSS was set up and on which I could do my own tweaks after the fact, as opposed to something like Jekyll, which is a bit more involved. So, I needed a clean, basic, WordPress theme to use as my template. Another reason I needed a clean theme is so that it doesn’t completely break when I export it as a static site. I decided to go with Netlify since they offer extremely fast, static website hosting through GitHub, as well as really great tools and an easy to use interface. ![](https://cdn.synaps.media/pupontech/content/images/wordpress/2019/07/meta_share_image-1024x536.png) *I love their logo.* I started out with[Local by Flywheel](https://localwp.com/) which is a Local Dev Environment for WordPress that’s extremely easy to use, and here is a quick [guide](https://getflywheel.com/layout/local-wordpress-development-environment-how-to/) to get you started. Next, I got the [wp-static plugin,](https://wordpress.org/plugins/static-html-output-plugin/) (no need for any other plugins), and then I set up GitHub and Netlify… [Here’s](https://www.netlify.com/blog/2016/10/27/a-step-by-step-guide-deploying-a-static-site-or-single-page-app/) a tutorial on how to do that. As mentioned previously, I needed to find a theme that wouldn’t break when converted to Static-HTML. I quickly realized that I needed a theme that’s built only using HTML and CSS without any fancy additions, because the additions would break upon static export. I went through some of the usual theme directories but in the end, landed on this[theme](https://github.com/) on GitHub. It worked straight out of the box statically and matched the aesthetic I was looking for. It also is an extremely well laid out theme in the programming department which helps an HTML and CSS noob like me. Next, I went through and built the basic outline of the site using WordPress’s built-in tools. There are many great tutorials available, so I won’t cover that over here. I did some further customization by going through the theme editor in the appearance menu, which lets you go through each part of the of HTML and CSS. ![](https://cdn.synaps.media/pupontech/content/images/wordpress/2019/07/open-graph-2-1024x538.png) *Because I needed a filler image.* I added social icons using [Fontawesome.](https://fontawesome.com/) I made a bunch of different changes in terms of font and scaling as well as customizing the footer, which I won’t bore you to death about here. After that, I needed to find a lightbox plugin and a gallery plugin which would work with a static site. Again, I found that sticking to the simplest plugins available, was the way to go. After a lot of trial and error, I settled on the following two: [Wp-featherlight](https://wordpress.org/plugins/wp-featherlight/)-for my photo lightbox [WP-Flickity](https://github.com/PaoloFalomoWebDesigner/WP-Flickity)-for my slider testimonial page, which I have not finished yet. They both use Jquery, for anyone who cares… ![](https://cdn.synaps.media/pupontech/content/images/wordpress/2019/07/chrome_SNUbGFGXim.png) *You may have to put the site name given by Netlify into the target directory, while testing.* When testing each step and to publish the final product, I needed to export the site statically, through the plugin. There is a way to link your Netlify directly, but I wasn’t able to get it to work. Instead, I exported it to a zip file and then uploaded it to Netlify directly. ![](https://cdn.synaps.media/pupontech/content/images/wordpress/2019/07/Wadh-Rinse-Repeat-cycle.png) *Do you use shampoo?* After you do this process a few hundred times and are happy with your site, you may want to add a custom domain. [Here](https://medium.com/fundscornertech/how-to-host-domain-to-netlify-site-for-free-step-by-step-guide-45d0c2102db3)is the guide I used. Start from step 6. And that’s it!! You should now be live. If you have any questions, comments, or suggestions, feel free to give me a holler. This is the [site](https://www.aygrossphotography.com/) I built and I am currently working on another one, with the same workflow. *** ## Discussion No replies yet.