How To Create A Static Homepage On Tumblr

Here is how you can create a static custom homepage on your Tumblr blog, by removing blog posts from and adding static content on the homepage.

How to remove blog posts from your Tumblr homepage?

Click on “customize” your theme button in the top right corner and go to “Edit HTML”. (Tip: before you start editing the code,  copy the existing code into a notepad .txt file)

customize tumblr

edit tumblr

Hit ctrl+F and search for the code snippet {block:Posts}.

Type in {block:PermalinkPage} just before {block:Posts}.

block tumblr post

Then hit ctrl+F again and search for {/block:Posts} and type in {/block:PermalinkPage} after it.

block tumblr posts on homepage

You should get something like this:

{block:PermalinkPage}
{block:Posts}
… …
{/block:Posts}
{/block:PermalinkPage}

Now there won’t be any blog posts showing up on your Tumblr homepage.

How to add static content on your Tumblr homepage?

With the blog posts gone (can still be reached via the Archive), here is how you add static content on your Tumblr homepage.

Hit ctrl+F and search for {block:IndexPage} and copy in the HTML code you want on the homepage.

static content on tumblr homepage

Hit the “Update preview” button and check that it look alright. You should get something like this:

{block:IndexPage}

Custom HTML code

{/block:IndexPage}

That’s it! And the end result will look something like this (http://hostingkingdom.tumblr.com)

hostingkingdom on tumblr


Update: Alternatively, if you don’t want to play around with your Tumblr theme settings you can get a stunning-looking designed and out-of-the-box custom made Tumblr theme from ThemeForest for around $20. It’s worth checking out!

with 27 comments 1 18459

27 comments on “How To Create A Static Homepage On Tumblr”

  1. Tim

    Nice walk through… been wondering how to do this on my blog, now I know!

    Reply
  2. LauraD

    I was looking for this but couldnt figure out how to make it happen. This was a really simple step by step

    Reply
  3. Sasha

    Hi, i’m doing an assignment for school and I’m trying to create a website using tumblr. I need the homepage to be static, but I also need to be able to visit other pages in my page navigation. Is there a way to do this?

    when I use your method- i am only able to have a static page. i.e. the pages are identical and have the IndexPage content instead of my posts.

    please help

    Reply
  4. kyle

    not exactly a great solution… misleading.

    Reply
  5. Eve00675

    I was thinking of creating a static page for the above site.
    Is there a way to rename the archive section ( I have a theme from Style Hatch – Juuvy) so that a name shows for each item of interest we wish to have

    e.g. post for How to sanitize make-up
    post on packing and posting safely
    post on FAQ’s
    post on T & Cs

    or if I create them as static pages will only the same one page ever show – I think that was what Sasha was saying.

    I am using Hostgator as my hosting.

    On your example page, the link to the archives is four horizontal lines in top left which is what I think Kyle objects to as not being very visible or descriptive.

    Await your comments with interest – I may play around with the pages in the meantime as our app is hopefully going live soon.

    Reply
    • Matt @ HostingKingdom

      Hi Eve

      As far as I know there is no way to customize the actual archive page on Tumblr. But you can certainly tweak how the link to the archive page looks and displays, just to give you something really basic to serve as a starting point. I went in to the configuration to edit the html, I looked up the <nav> element, deleted what was there with the below. Ended up with this on http://hostingkingdom.tumblr.com/

      <nav>
      <ul>
      <li><h3><a href="/archive" rel="nofollow">Other Pages</a></h3></li>
      <ul>
      </nav>

      Hope this helps!

      Reply
  6. Chloe

    Hello,

    thank you for your tutorial. However, since I don’t find {block:IndexPage} in the html edition page.. I dont know where I should put my code to get a static homepage.
    Any suggestions ?
    Thank you very much !

    Reply
  7. kevin tiongson

    The posts are gone but i still get the notes, tags, dates. theyre just floating about

    Reply
  8. Gareth

    Hi Matt,

    That works a treat, only problem – I am using redirects on other pages to display tagged content. When I insert the:

    {block:PermalinkPage}
    {block:Posts}
    … …
    {/block:Posts}
    {/block:PermalinkPage}

    code it seems to remove the content from all pages not just the home page. Any way round this?

    Thanks in advance

    GB

    Reply
  9. Adam

    Is there a tumblr theme i can use that has all of the codes necessary for the steps, because all of the themes i tried so far dont have the block index page i need.

    Reply
  10. Lewaa Bahmad

    Hello! This is a very helpful post.

    If I may ask, how is it that I can get the blog to appear on a page that isn’t the homepage? The goal is to have a static homepage, and the blog appear on …/blog

    Does this make sense?

    Thank you!

    Reply
  11. marko

    Hi! Thanks for the great tutorial, I’ve been wanting to make a tumblr page like this for ages!

    The only problem with this method is, it doesn’t seem to be able to show tags anymore. I have an art tumblr with different kinds of posts marked by tags (photo, collage, video etc) and I use “pages” to link to these posts tagged with different stuff. Is there any way to keep the pages/tags links working while still having a static homepage, or is creating individual pages for different stuff the only way? In other words, is there any way to get the posts to show by tag, and not only in archive? Thanks!

    Reply
    • hjba

      Hi Marko,

      I am trying to set up my tumblr for art purposes also and have the same problem! Did you find a work around?

      Reply
      • marko

        No, the only thing I could think of was to link to certain posts using the “pages” links…. I’m trying to find a new theme that makes it look good

        Reply
    • Monique

      You can wrap the old {block:Posts}…{/block:Posts} between {block:TagPage}…{/block:TagPage}

      That way, you can make them appear only on the tag pages :)

      Reply
      • Connor

        Thanks so much Monique! That was exactly what I needed!

        Reply
      • ferg

        Hi Monique, you’re comment was really helpful!

        However using this code has also hidden content on my ‘standard layout’ pages.

        My question is this:

        Is there a way to keep the static homepage, have tagged posts appear in redirected pages and keep the content on my static pages?

        Thanks

        Reply
  12. Rori Lane

    Once I set this up, is there a way to have links to pages that contain specific tags?

    Basically, I know how to redirect a page to a tag, but with the static homepage, it’s redirecting to that home page every time.

    So, is there a way to make a page in Tumblr and make it show the posts of a specific tag? Like in WordPress you can put a snippet that says “insert tags blah here”

    Any ideas?

    Reply
  13. michael mcbride

    Hello, I have a few basic questions concerning my Tumblr Website.

    1. I would like to have a static homepage with no blog posts, which I have finally managed to create, but in my navigation I would like a link to my blog. How is that possible?

    2. When navigating, I have Gif that I want to be stationary. It moves everytime I switch pages. Any solution to that?

    If you need to see what i’m talking about here is my site:
    MichaelMcBrideFilms.com

    Thanks for your time,
    Michael McBride

    Reply
  14. Arlette

    Ok, so, I’ve already removed the posts from the homepage, but I can’t manage to change the html so it can have static content, like a text, or set an specific background image for it, how can I do that?

    Reply
  15. Kate

    I am using the Wallstocker theme and have managed to remove the blog posts from the homepage, however I now also have the issue with the blog posts,which are tagged to appear in my pages, now not appearing anywhere, I also tried pasting in code I took from a picture blog post that I wanted on my homepage but it didn’t work – I followed the instructions but I there was some extra code in between the parts you suggested I paste between – I did not know what to do with that extra code, can someone help?

    Thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *