Developers April 22, 2020

I created my own static PHP blogging platform

Cristian @XCS

TL;DR: https://github.com/Cristy94/markdown-blog
Demo here

How it all started

A few days ago I asked for suggestions: "Is there any tool to create static blog posts?" on how could I easily add blog-like content to an existing site. I was amazed by the awesome response from the community 💗and I thank all of you for your suggestions.

Although most of the suggestions were great, almost all were too complex for my needs. I didn't want to start using a 3rd party service to host my blog or to learn and add extra tools and build-steps that would still not allow me to easily create content.

I came up with a solution inspired by @haltakov (he suggested to simply write markdown and preview it in the code editor) and @robenkleene (he suggested to parse the markdown files directly in PHP, thus removing a build step).

Solution

I am really happy with the solution, it's really, really simple but it works very well for my use-case (integrate a blog into an existing PHP site).
The solution came by combining several suggestions received in the post mentioned above with some of my own ideas:

  • Write blog posts in Markdown.
  • Preview Markdown while typing directly in VSCode.
    vscode-image-preview
  • Use a PHP Markdown parsing library to load the .md files on the fly. I used Parsedown. This means that no database is needed, there is no build step and you can easily version posts using git.
  • Use .htaccess rewrites for nice blog post URLs.

Demo

You can see a usage demo here (the blog is integrated into an existing site).

Conclusion

I can now simply create new blog posts by simply writing a new .md and I also have a nice preview while typing them.

Huge thanks to everyone for the great suggestions! I now just have to start creating the content! 😅

  1. 3

    I don’t think it would qualify as static if you need to execute PHP on the server to handle requests.

    1. 3

      I totally agree, it's not static as in plain HTML.

      But if you think about it, even a plain HTML site is hosted on a server which dynamically responds to HTTP requests.

      I personally still consider it to be "static" because:

      • Content is written in a static file and doesn't change between requests.
      • There is no database or content generated based on dynamic data (the only dynamic part is the URL, but it always points to the file name, the same as with static sites).
      • I use Cloudflare on top of it, so requests do not reach my server, Cloudflare always responds with plain HTML/CSS, without executing the dynamic PHP code that processes the markdown. I forgot to mention this in the post.
      • There is no build step. Based on this I think it can be considered even "more" static than other alternatives. If it's needed you can easily add a build step that simply saves the generated HTML output, thus making it truly satic. But now Cloudflare is already doing this.

      So, now, in the wild the blog receives requests and responds with plain HTML, without executing any PHP. Wouldn't that be considered static?

      What exactly makes a website static?

      Thank you for your remark!

      1. 2

        If you need PHP on the server, it is not static. If you cannot host your website on a static repository (like AWS S3, per example), so the website is not static, very simple. But you could create a build step on your program (which is pretty simple on PHP), and create the html pages locally. Then you have a static generator based on PHP! Which makes much more sense if you think about it (why process the md file every time?).

        1. 1

          Yes, you can easily add a build step to get plain HTML, but as I mention in the Github description: what's the point? It would just add an extra build step that in the end, in my case, brings no extra benefits that I can see.

          why process the md file every time?)

          I don't. I upload it once, it is cached by Cloudflare and all the requests just serve the cached output HTML. It's like Cloudflare does the PHP->HTML build step you mentioned.

          Why upload the md on the server and not HTML? Easier to edit, version, read. Plus if I ever want to change how all posts look or what extra info they show, I can just change directly the CSS or PHP template and clear the cache. So I only change one file on my server instead of hundreds of posts.

          1. 1

            If you rely on the CloudFlare cache , then your platform is not actually static. You say you just change one file on the server, but then again you need to login to CloudFlare and clear the cache there.

            1. 1

              But if I had own server doing the HTML caching it would be static?

              Terminology aside, personally I find it easier to click the clear cache button than to have a build step that could fail or for which I have to type one ore multiple commands and install extra dependencies. If I find clearing the cache troublesome, I can also make a command or trigger that calls the Cloudflare API to clear the cache when I make a new commit.

      2. 1

        All of your points are great, and yes they are reasons that the term "static website" is a somewhat murky.

        With that said, I would consider @adamringhede interpretation correct: It's only a static website if all of the assets are hosted as-is on the server. I.e., if your assets are constructed by a web app, then it's not a static site.

        1. 1

          That's a good definition, but it also depends on what you refer to as being the server. The servers that the client reaches are the Cloudflare servers, where the static assets are indeed served directly as-is.

          I think calling it static will confuse some people as it might not be the standard definition of static because it uses PHP. So the app, as it is, is not really static unless you add a caching layer on top. Probably my initial question was wrong, as I wanted something to integrate into my existing website without adding an extra build step, 3rd party service or database.

          Weird question: What if the markdown was displayed as it is in HTML but then processed on the client using JS, would it be considered static then? The assets would be hosted as-is on the server, but the processing would be moved on the client. If not, is using any client-side JS making a site non-static? What about CSS? It also has to be processed client-side by the browser.

          I am not arguing, I don't really care about the terminology, I'm just curious and I think those are interesting questions to think about.

          1. 3

            Yup, using a CDN like Cloudflare is a common practice, so the definition of a static website I described is regardless of whether you're using a CDN or not (and yes I agree the distinction is a bit murky, but when the web developer community talks about static websites, this is what they mean).

            If you're serving raw Markdown embedded in HTML in static files on your servers, and then rendering the Markdown via JavaScript on the client, then yes, that's 100% a static website. (You're actually getting pretty close to describing how Jamstack works, which I'd consider the hottest web development architecture methodology of the moment.) Same answer for CSS, when you say "static site" that just means your assets are stored as plain HTML, CSS, and JavaScript on your server, regardless of whether you're doing anything dynamic on the client.

            (Thanks for the point about not arguing. Personally I don't care either, I've just researched what people mean by static site myself because I had some of the same question you do. I'm just sharing my understanding of what I learned.)

  2. 2

    After posting it on Github I realized that it's also really easy to edit the posts directly on GitHub, as it displays Markdown and allows you to edit files: https://github.com/Cristy94/markdown-blog/blob/master/posts/markdown-example.md

  3. 1

    Seems nice for smaller projects, will check it over the weekend. Thanks.
    btw I am old user of your heatmap script, very useful while configuring landing page and areas for optimization.

    1. 1

      Thank you! 💗

      I think it is very suitable for my use-case, where you already have a site/landing page written in PHP.

      PS: You should download (for free) the new v3 version of userTrack, it has many improvements.

      1. 2

        Downloaded 10 mins ago, also playing with it over the weekend. Thanks

      2. 1

        I've left downloaded file on another computer, last month and next few weeks I'll not have access to it. I've tried to download it again (now when I have time to install it) but download is removed from the envato panel and file is not available anymore. Is there any chance to send me the latest, updated usertrack zip ?

        1. 1

          Hi Dotz!

          Please send an email at [email protected] mentioning your CodeCanyon purchase code. You will receive a free new lifetime license for the Gumroad distribution system.

          Cristian

          1. 1

            Thanks, will do it now.

Recommended Posts