给大家一款很不错的个人博客源码

CodeAE

源码无后台、纯静态单页面，简单易用上传即可用，网站共9个精美的页面。

部分代码展示：

<!DOCTYPE html>
<html lang="en"> 
<head>
  <title>有趣点-我的情感译站</title>
  
  <!-- Meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Blog Template">
  <meta name="author" content="Xiaoying Riley at 3rd Wave Media">  
  <link rel="shortcut icon" href="favicon.ico"> 
  
  <!-- FontAwesome JS-->
  <script defer src="assets/js/all.js"></script>
  
  <!-- Theme CSS -->  
  <link id="theme-style" rel="stylesheet" href="assets/css/theme-1.css">

</head> 

<body>
  
  <header class="header text-center">      
      <h1 class="blog-name pt-lg-4 mb-0"><a href="index.html">My-冷烟客</a></h1>
    
      <nav class="navbar navbar-expand-lg navbar-dark" >
       
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div id="navigation" class="collapse navbar-collapse flex-column" >
                <div class="profile-section pt-3 pt-lg-0">
                  <img class="profile-image mb-3 rounded-circle mx-auto" src="assets/images/profile.png" alt="image" >            
                    
                    <div class="bio mb-3">欢迎来到我的博客
<br><a href="001.html">找到更多关于我！</a></div><!--//bio-->
                    <ul class="social-list list-inline py-3 mx-auto">
                  <li class="list-inline-item"><a href="#"><i class="fab fa-twitter fa-fw"></i></a></li>
                  <li class="list-inline-item"><a href="#"><i class="fab fa-linkedin-in fa-fw"></i></a></li>
                  <li class="list-inline-item"><a href="#"><i class="fab fa-github-alt fa-fw"></i></a></li>
                  <li class="list-inline-item"><a href="#"><i class="fab fa-stack-overflow fa-fw"></i></a></li>
                  <li class="list-inline-item"><a href="#"><i class="fab fa-codepen fa-fw"></i></a></li>
                </ul><!--//social-list-->
                <hr> 
                </div><!--//profile-section-->
                
                <ul class="navbar-nav flex-column text-left">
                    <li class="nav-item active">
                      <a class="nav-link" href="index.html"><i class="fas fa-home fa-fw mr-2"></i>我的主页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="001.html"><i class="fas fa-bookmark fa-fw mr-2"></i>我的博文</a>
                    </li>
                    <li class="nav-item">

                    </li>
                </ul>
                
                <div class="my-2 my-md-3">
                  <a class="btn btn-primary" href="#" target="_blank">联系我吧</a>
                </div>
            </div>
        </nav>
  </header>
  
  <div class="main-wrapper">
      <section class="cta-section theme-bg-light py-5">
          <div class="container text-center">
              <h2 class="heading">有趣点-我的情感译站</h2>
              <div class="intro">欢迎来到我的博客，分享生活点滴，共读感故事</div>
              <form class="signup-form form-inline justify-content-center pt-3">
          <div class="form-group">
            <label class="sr-only" for="semail">Your email</label>
            <input type="email" id="semail" name="semail1" class="form-control mr-md-1 semail" placeholder="输入你要查找的内容">
          </div>
          <button type="submit" class="btn btn-primary">搜索更多</button>
        </form>
          </div><!--//container-->
      </section>
      <section class="blog-list px-3 py-5 p-md-5">
          <div class="container">
              <div class="item mb-5">
                  <div class="media">
                      <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="assets/images/blog/blog-post-thumb-1.jpg" alt="image">
                      <div class="media-body">
                          <h3 class="title mb-1"><a href="002.html">信心是实现自我的垫脚石</a></h3>
                          <div class="meta mb-1"><span class="date">发布时间</span><span class="time">2019.12.20</span><span class="comment"><a href="#">My-冷烟客</a></span></div>
                          <div class="intro">经典人生哲理名言古语云：人无信则不立。当然，这个信不只是“信誉”之义，还可以做“信心”之义。人只有具备了信心这一先决条件，才能放下包袱去拼搏创造，从而推动社会在前行之路上越走越远。也可以更好地彰显自己的价值，使自己走上前行之路，攀登人生顶峰。...</div>
                          <a class="more-link" href="002.html">查看更多 &rarr;</a>
                      </div><!--//media-body-->
                  </div><!--//media-->
              </div><!--//item-->
              <div class="item mb-5">
                  <div class="media">
                      <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="assets/images/blog/blog-post-thumb-2.jpg" alt="image">
                      <div class="media-body">
                          <h3 class="title mb-1"><a href="003.html">随缘是最好的生活</a></h3>
                          <div class="meta mb-1"><span class="date">发布时间</span><span class="time">2019.12.20</span><span class="comment"><a href="#">My-冷烟客</a></span></div>
                          <div class="intro">经典人生哲理名言告诉大家，人的一生会路过许多风景，但终点只有一个;人的一生会对许多人心动，但真爱只有一人。喜欢，只是一种激情;而爱，却是一辈子的感情。一份缘相遇，是机缘...</div>
                          <a class="more-link" href="003.html">查看更多 &rarr;</a>
                      </div><!--//media-body-->
                  </div><!--//media-->
              </div><!--//item-->
              
              <div class="item mb-5">
                  <div class="media">
                      <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="assets/images/blog/blog-post-thumb-3.jpg" alt="image">
                      <div class="media-body">
                          <h3 class="title mb-1"><a href="004.html">很精彩的句子，喜欢就拿去发朋友圈吧</a></h3>
                          <div class="meta mb-1"><span class="date">发布时间</span><span class="time">2019.12.20</span><span class="comment"><a href="#">My-冷烟客</a></span></div>
                          <div class="intro">1、忘记一个人有两个办法，时间和新欢。如果还是忘不掉只有两个理由，时间不够长，新欢不够好。

　　2、“世人贪婪，总想寻找两全，但这世间难有什么两全之策。人生百年，不过是教人如何...</div>
                          <a class="more-link" href="004.html">查看更多 &rarr;</a>
                      </div><!--//media-body-->
                  </div><!--//media-->
              </div><!--//item-->
              <div class="item mb-5">
                  <div class="media">
                      <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="assets/images/blog/blog-post-thumb-4.jpg" alt="image">
                      <div class="media-body">
                          <h3 class="title mb-1"><a href="005.html">不是你的菜，别去揭锅盖</a></h3>
                         <div class="meta mb-1"><span class="date">发布时间</span><span class="time">2019.12.20</span><span class="comment"><a href="#">My-冷烟客</a></span></div>
                          <div class="intro">不是你的菜，别去揭锅盖；
　　不是你的爱，不要去依赖。
人生，
　　看你的人多，懂你的人少；
　　说你的人多，帮你的人少；
　　相遇的人多，相依的人少...</div>
                          <a class="more-link" href="005.html">查看更多 &rarr;</a>
                      </div><!--//media-body-->
                  </div><!--//media-->
              </div><!--//item-->
              
              <div class="item mb-5">
                  <div class="media">
                      <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="assets/images/blog/blog-post-thumb-5.jpg" alt="image">
                      <div class="media-body">
                          <h3 class="title mb-1"><a href="006.html">如何成为一个做大事的人</a></h3>
                        <div class="meta mb-1"><span class="date">发布时间</span><span class="time">2019.12.20</span><span class="comment"><a href="#">My-冷烟客</a></span></div>
                          <div class="intro">用了两天的时间，一口气读完了山姆•沃尔顿（SamWalton）的自传MadeinAmerica，中文出版的时候翻译成《富甲美国》。山姆是世界最大的折扣连锁店沃尔玛的创始人。该书是他在去世前一年完成的，当时他已经得了骨癌，所以是总结自己一生的一部传记。整部传记充满了对于自己事业的热爱...</div>
                          <a class="more-link" href="006.html">查看更多 &rarr;</a>
                      </div><!--//media-body-->
                  </div><!--//media-->
              </div><!--//item-->
              
              <div class="item">
                  <div class="media">
                      <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="assets/images/blog/blog-post-thumb-6.jpg" alt="image">
                      <div class="media-body">
                          <h3 class="title mb-1"><a href="007.html">我们要努力做好当下</a></h3>
                        <div class="meta mb-1"><span class="date">发布时间</span><span class="time">2019.12.20</span><span class="comment"><a href="#">My-冷烟客</a></span></div>
                          <div class="intro">关于人生哲理的句子分享给大家，人生，最大的遗憾是站不到远处去审视自己，最大的困难是无法战胜自己。成就往往喜欢眷顾那些虚怀若谷，并能时常审视自己的人。审视自己，就是把自己放在旁观者的角度...</div>
                          <a class="more-link" href="007.html">查看更多 &rarr;</a>
                      </div><!--//media-body-->
                  </div><!--//media-->
              </div><!--//item-->
              
              <nav class="blog-nav nav nav-justified my-5">
                  <a class="nav-link-prev nav-item nav-link d-none rounded-left" href="#">Previous<i class="arrow-prev fas fa-long-arrow-alt-left"></i></a>
                  <a class="nav-link-next nav-item nav-link rounded" href="001.html">更多<i class="arrow-next fas fa-long-arrow-alt-right"></i></a>
                </nav>
                
          </div>
      </section>

  </div><!--//main-wrapper-->

  <!-- *****CONFIGURE STYLE (REMOVE ON YOUR PRODUCTION SITE)****** -->  
  <div id="config-panel" class="config-panel d-none d-lg-block">
    <div class="panel-inner">
      <a id="config-trigger" class="config-trigger config-panel-hide text-center" href="#"><i class="fas fa-cog fa-spin mx-auto" data-fa-transform="down-6" ></i></a>
      <h5 class="panel-title">风格选择</h5>
      <ul id="color-options" class="list-inline mb-0">
        <li class="theme-1 active list-inline-item"><a data-style="assets/css/theme-1.css" href="#"></a></li>
        <li class="theme-2  list-inline-item"><a data-style="assets/css/theme-2.css" href="#"></a></li>
        <li class="theme-3  list-inline-item"><a data-style="assets/css/theme-3.css" href="#"></a></li>
        <li class="theme-4  list-inline-item"><a data-style="assets/css/theme-4.css" href="#"></a></li>
        <li class="theme-5  list-inline-item"><a data-style="assets/css/theme-5.css" href="#"></a></li>
        <li class="theme-6  list-inline-item"><a data-style="assets/css/theme-6.css" href="#"></a></li>
        <li class="theme-7  list-inline-item"><a data-style="assets/css/theme-7.css" href="#"></a></li>
        <li class="theme-8  list-inline-item"><a data-style="assets/css/theme-8.css" href="#"></a></li>
      </ul>
      <a id="config-close" class="close" href="#"><i class="fa fa-times-circle"></i></a>
    </div><!--//panel-inner-->
  </div><!--//configure-panel-->

  
     
  <!-- Javascript -->      
  <script src="assets/plugins/jquery-3.3.1.min.js"></script>
  <script src="assets/plugins/popper.min.js"></script> 
  <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script> 

  <!-- Style Switcher (REMOVE ON YOUR PRODUCTION SITE) -->
  <script src="assets/js/demo/style-switcher.js"></script>   
  

</body>
</html>

给大家一款很不错的个人博客源码

相关帖子

帝国cms汉语字典源码,PC移动端自适应整站源码,自带采集规则

分享一个小清新自适应宇航员404页面丢失网页模板

HTML实现爱心旋转代码

jQuery实时节气罗盘时钟代码

jQuery创意圆形罗盘时钟代码（二）

CodeAE LV9